Question

所以基本上我想要用DOM进行操作，并用一个带有的img标签替换一个canvas标签角变量为attrubute ...

我使用这行代码：

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

但最终插入的是：

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

围绕{{ImageToEdit}}的引号会停止意识到它是范围的一部分。任何解决方案都将非常感谢！

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

因此，让我们先从加载页面时的外观开始：

<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标签.. < / p>

$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中的插值表达式没有得到评估。

快速而肮脏的修复方法是在你的上下文中使用任何适当的angular指令（如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

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

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

1 个答案: