创建角变量作为属性值

所以基本上我想manupilate DOM和替换具有角变量attrubute img标签在画布标记的div ...创建角变量作为属性值

我使用这行代码：

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

但是最终beeing插入是这样的：

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

周围的引号{{ImageToEdit}}停止角度从意识到这是意料之中t的范围。任何解决方案将不胜感激！

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

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

<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>

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

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

Pixastic。过程将修改DOM并更改img标签在画布标记（和删除NG-src属性）

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

$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破坏

来源

2014-05-08 BAYELK

为什么不使用指令来替换内容而不是使用jQuery。我想这可能会更容易记下错误。但是，我不认为问题在这里引用。 – Sandeep

对于动态添加的html，您需要使用$ compile服务来编译动态html内容。 – Chandermani

哦谢谢！当我尝试你建议的代码时，我会寻找$ compile – BAYELK

img标记是正确的，但这不起作用我假设，因为jQuery replaceWith发生在Angular上下文之外（Angula r没有意识到改变），所以它不会尝试重新绘制DOM，并且ng-src中的插值表达式不会被评估。

快速和肮脏的修补程序将执行jQuery replaceWith函数里面的任何适当的角度指令应该在您的上下文中使用像ng点击。

或者手工编制HTML内容的东西，如：

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

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

来源

2014-05-08 17:09:10

TypeError：无法读取未定义的属性'invoke'...是否有一些依赖性需要注入到我的模块中？在文档中找不到任何文件... – BAYELK

看起来jquery选择器在2个位置是错误的 - 尝试将logging.element（$（“＃editImage”））记录到控制台，如果该对象返回了DOM对象关于什么Pixastic。过程对元素做出）尝试。 –

谢谢！我读了一下，我同意它不是最漂亮的解决方案，但嘿它的作品:) – BAYELK

创建角变量作为属性值

回答

相关问题