使用角度变量作为属性值创建 div

Question

所以基本上我想操纵 DOM 并将画布标签替换为具有 角度变量作为属性...

我使用这行代码：

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

但最终插入的是这样的：

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

{{ImageToEdit}} 周围的引号阻止 angular 意识到它是范围的一部分。任何解决方案将不胜感激！

编辑： 好吧，这比我想象的要复杂一些......所以如果我提供更多背景信息，你们可以更好地帮助我：

让我们从页面加载时的外观开始：

<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 或 next 时，ImageToEdit 会发生变化，但如果调用 invert()：

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

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

所以当例如 next() 被调用时，什么都不会改变......所以我尝试做的是在 next() 中调用一个函数，该函数从画布返回数据并将其转换回原始 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 销毁

Answer 1

img 标记是正确的，但我认为这不起作用，因为 jQuery replaceWith 发生在 Angular 上下文之外（Angular 不知道更改），因此它不会尝试重新绘制 DOM 和ng-src 中的插值表达式不会被评估。

快速而肮脏的解决方法是在上下文中使用任何适当的角度指令（如 ng-click）中执行 jQuery replaceWith 函数。

或者，手动编译 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

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