Javascript 将元素放置在AngularJS中的DOM中

假设我们在作用域中有一个数组，其中包含画布元素

AngularJS

$scope.canvasElements =
 [document.createElement('canvas'), document.createElement('canvas')];

HTML

<element replace-with="currentCanvas" ng-click="alert('clicked')"></element>

假设我们更改了

$scope.currentCanvas

，如下所示：

$scope.currentCanvas = $scope.canvasElements[0];

$scope.currentCanvas = $scope.canvasElements[1];

现在，当前选择的canvas元素（

$scope.currentCanvas

）应该替换DOM中的

附加到

的所有事件都要传输到新元素（在本例中为画布），新元素将替换它

如果变量

$scope.currentCanvas

发生更改，如下所示：

$scope.currentCanvas = $scope.canvasElements[0];

$scope.currentCanvas = $scope.canvasElements[1];

同样的事情也应该发生（我认为这里应该使用范围监视）

有什么解决办法吗

---

非常感谢您事先提供的帮助。

我不确定您为什么需要满足这些条件，以及您需要传输哪些确切的事件：

附加到

的所有事件我都要传输到新的 元素（在本例中为画布），它将替换它

但是，假设

点击
事件对您来说就足够了，实现您的目标最简单、最快的方法是以下指令：

angular.module('app').directive('fakeElement', function() {
    return {
        replace: true,
        restrict: 'E',
        scope: { replaceWith: '=' },
        link: function(scope, elem, attrs) {
            scope.$watch(
                'replaceWith',
                () => elem.html('').append(scope.replaceWith)
            );                  
        },
        template: '<div class="wrapper"></div>'
    };
});

angular.module（'app'）。指令（'fakeElement'，函数（）{
返回{
替换：正确，
限制：'E'，
作用域：{replaceWith:'='}，
链接：功能（范围、要素、属性）{
范围.$watch(
“替换为”，
（）=>elem.html（“”）.append（scope.replaceWith）
);                  
},
模板：“”
};
});

指令侦听
replaceWith
参数中的更改，并相应地修改指令的内容

由于事件的冒泡性质，不需要将
单击
处理程序转移到新元素

你可以玩它。每次单击
都会将当前的
替换为下一行

如果您不仅要动态替换常规HTML元素，还要动态替换自定义指令，您还必须在添加新元素之前
$compile
新元素。
我不确定您为什么需要满足这些条件以及需要传输哪些确切的事件：

附加到
的所有事件我都要传输到新的
元素（在本例中为画布），它将替换它

但是，假设
点击
事件对您来说就足够了，实现您的目标最简单、最快的方法是以下指令：

angular.module('app').directive('fakeElement', function() {
    return {
        replace: true,
        restrict: 'E',
        scope: { replaceWith: '=' },
        link: function(scope, elem, attrs) {
            scope.$watch(
                'replaceWith',
                () => elem.html('').append(scope.replaceWith)
            );                  
        },
        template: '<div class="wrapper"></div>'
    };
});

angular.module（'app'）。指令（'fakeElement'，函数（）{
返回{
替换：正确，
限制：'E'，
作用域：{replaceWith:'='}，
链接：功能（范围、要素、属性）{
范围.$watch(
“替换为”，
（）=>elem.html（“”）.append（scope.replaceWith）
);                  
},
模板：“”
};
});

指令侦听
replaceWith
参数中的更改，并相应地修改指令的内容

由于事件的冒泡性质，不需要将
单击
处理程序转移到新元素

你可以玩它。每次单击
都会将当前的
替换为下一行

如果您不仅要动态替换常规HTML元素，还要动态替换自定义指令，您还必须在添加新元素之前
$compile
新元素。
下面的代码回答了我的问题！
这段代码的主要部分是“el”指令，其余部分只是为了演示该指令是如何工作的

希望这对其他开发者也有帮助


angular.element.prototype.cloneCanvas=function（）{
如果（！this.is（'canvas'））返回此；
var canvas=this[0]；
var newCanvas=document.createElement（'canvas'）；
var context=newCanvas.getContext（'2d'）；
newCanvas.width=canvas.width；
newCanvas.height=canvas.height；
drawImage（画布，0,0）；
返回新画布；
};
角度.module（'app'，[]）
.指令（'el'，函数（$compile）{
返回{
限制：'E'，
范围：{
元素：'='
},
编译：函数（元素、属性）{
返回函数（范围）{
var currentElement=元素；
范围.$watch（'element'，函数（newValue，oldValue）{
if（newValue&&typeof newValue==“对象”）{
var newOb=角度元素（newValue）[0]；
if（typeof newOb.style==“对象”）{
var clone=angular.element（newOb）.is（'canvas'）？
angular.element（newOb.cloneCanvas（）：angular.element（newOb.clone（）；
var attrs=angular.element（element）[0]。属性；
角度.forEach（属性，函数（属性）{
元素（克隆）.attr（attr.name，attr.value）；
});
var clone=$compile（clone）（作用域$parent）；
currentElement.replaceWith（克隆）；
currentElement=克隆；
}
}
});
}
}
};
})
.controller（'mainCtrl'，函数（$scope）{
$scope.canvascelements=[document.createElement（'canvas'）、document.createElement（'canvas'）、document.createElement（'canvas'）；
$scope.canvasElements.forEach（函数（canvas，i）{
var ctx=canvas.getContext（'2d'）；
画布宽度=100；
画布高度=100；
ctx.fillStyle=“#EEE”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle=“红色”；
ctx.font=“20px Arial”；
ctx.fillText（“画布”+（i+1），7,55）；
ctx.save（）；
});
$scope.currentCanvas=$scope.canvasElements[0]；
$scope.setNextCanvasAsCurrent=函数（）{
$scope.currentCanvas=$scope.canvasElements.indexOf（$scope.CurrentCanvasElements）[0]：$scope.canvasElements.indexOf（$scope.currentCanvas）==$scope.canvasElements.length-1？$scope.canvasElements[0]：$scope.canvasElements[$scope.canvasElements.indexOf（$scope.CurrentCanvasCanvasElements）+1]
};
})




将下一个画布设置为当前画布
{{canvasElements.indexOf（currentCanvas）+1}
/
{{canvascelements.length}
下面的代码是answ