具有角变量作为属性值创建的div [英] Create div with angular variable as attribute value

问题描述

所以基本上我想manupilate DOM和使用具有一个img标签替换canvas标签
角变量attrubute ...

So basically i want to manupilate the DOM and replace a canvas tag with an img tag that has a angular variable as attrubute...

我用这条线code的：

I use this line of code:

$("canvas").replaceWith('<img id="editImage" ng-src={{ImageToEdit}}>');

但最终beeing插入是这样的：

But what ends up beeing inserted is this:

<img id="editImage" ng-src="{{ImageToEdit}}">

周边行情{{ImageToEdit}}停止从意识到这是范围的一部分角。任何解决方案将大大AP preciated！

The quotes surrounding {{ImageToEdit}} stops angular from realizing that it is part of the scope. Any solution would be greatly appreciated!

编辑：
欧凯所以这是一个比较复杂一点比我想象的......所以莫比你们能更好地帮助我，如果我提供一些更多的背景：

Okey so this is a bit more complicated than I thought... so maby you guys could help me better if I provide some more background:

所以让我们先从它的外观时，页面加载：

So lets start with how it looks when the page is loaded:

<img id="editImage" class="edit-image" ng-src="{{ImageToEdit}}">
<button class="btn btn-success" ng-click="previous()">prev</button>
<button class="btn btn-success" onClick="invert()">invert</button>
<button class="btn btn-success" ng-click="next()">next</button>

在previous或下一个被称为ImageToEdit改变，但如果反转（）被调用：

when previous or next is called the ImageToEdit is changed, but if invert() is called:

function invert(){
img = document.getElementById('editImage');
var newpix = Pixastic.process(img, "invert");
}

Pixastic.process将修改DOM并更改img标签到canvas标签（并删除NG-src属性）

Pixastic.process will modify the DOM and change the img tag to a canvas tag (and remove the ng-src attribute)

所以，当例如下一个（）被调用时什么都不会改变...所以我尝试做的是调用下一个）功能（从画布返回数据，并把它放回原来的img标签..

so when for example next() is called nothing will change... so what i try to do is call a function in next() that returns the data from canvas and turns it back into the original img tag..

$scope.next = function (){
var data = resetCanvasToImgAngGetModifiedData();
$scope.images[$scope.index] = data;
if($scope.index == ($scope.images.length -1)){
  $scope.index = 0;
}else{
  $scope.index = $scope.index + 1;
}
$scope.ImageToEdit = $scope.images[$scope.index];
}


function resetCanvasToImgAngGetModifiedData(){
var canvas = document.getElementById("editImage");
var dataURL = canvas.toDataURL();
$("canvas").replaceWith('<img id="editImage" class="edit-image" ng-src=  {{ImageToEdit}}>');
return dataURL;
 }

我不明白如何，我做到这一点使用指令......作为原始img标签将被Pixastic被销毁

I do not understand how I am to accomplish this using directives... as the original img tag will be destroyed by Pixastic

推荐答案

在IMG标记是正确的，但是这不会工作，我认为是因为jQuery的replaceWith的角度上下文之外发生（角是不知道的变化）所以它不会尝试重新粉刷DOM和NG-SRC插值前pression没有得到评估。

The img markup is correct, but this won't work I assume because the jQuery replaceWith occurs outside of the Angular context (Angular is not aware of the change) so it doesn't try to re-paint the DOM and the interpolation expression in ng-src doesn't get evaluated.

快速和肮脏的解决将是执行任何适当的角度指令应在上下文像NG-点击使用里面的jQuery的replaceWith功能。

The quick and dirty fix would be to perform the jQuery replaceWith function inside of whatever appropriate angular directive should be used in your context like ng-click.

或者，对于像手动编写HTML内容：

Or, manually compiling the html content with something like:

angular.element($("#canvas")).injector().invoke(function($compile) {
    var scope = angular.element($("#canvas")).scope();
    var compiledImg = $compile('<img id="editImage" ng-src={{ImageToEdit}}>')(scope);
    $("#canvas").replaceWith(compiledImg);
});

https://docs.angularjs.org/api/ng/function/ angular.element

或者，使用指令来管理元素（最好的）。

Or, use a directive to manage the element (best).

这篇关于具有角变量作为属性值创建的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！