將元素放在AngularJS中的DOM中

Question

假設我們在范圍內有一個數組，其中包含canvas元素。

AngularJS

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

HTML

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

currentCanvas是一個變量，它將引用數組中當前選定的畫布。

$scope.currentCanvas = null;

並說我們改變了$scope.currentCanvas如下所示：

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

現在，當前選擇的canvas元素（ $scope.currentCanvas ）應該替換DOM中的<element> 。

附加到<element>所有事件我想轉移到新元素（在本例中為canvas），它將替換它。

如果變量$scope.currentCanvas發生變化，如下所示：

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

應該發生同樣的事情（我認為應該使用范圍觀察）。

有解決方案??

非常感謝您的幫助。

Answer 1

我不確定您為什么需要滿足這些條件以及需要轉移的確切事件：

附加到<element>所有事件我想轉移到新元素（在本例中為canvas），它將替換它

但是，假設click事件對您來說足夠了，實現目標的最簡單，最快捷的方法是以下指令：

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>'
    };
});

該指令偵聽replaceWith參數中的更改並相應地修改指令的內容。

由於事件的冒泡性質，無需將click處理程序轉移到新元素。

你可以在這里玩它。 每點擊一個<div>內容替換當前<div>與管線下。

如果你想要動態替換常規HTML元素，而不是自定義指令，你還必須在追加它之前$compile new元素。

Answer 2

下面的代碼回答了我的問題！

這段代碼中的主要內容是“el”指令，其余的只是用於演示指令的工作原理。

希望這也有助於其他開發人員！

 angular.element.prototype.cloneCanvas = function(){ if (!this.is('canvas')) return this; var canvas = this[0]; var newCanvas = document.createElement('canvas'); var context = newCanvas.getContext('2d'); newCanvas.width = canvas.width; newCanvas.height = canvas.height; context.drawImage(canvas, 0, 0); return newCanvas; }; angular.module('app', []) .directive('el', function($compile){ return { restrict: 'E', scope: { element: '=' }, compile: function(element, attrs){ return function(scope){ var currentElement = element; scope.$watch('element', function (newValue, oldValue) { if (newValue && typeof newValue === "object") { var newOb = angular.element(newValue)[0]; if (typeof newOb.style === "object") { var clone = angular.element(newOb).is('canvas') ? angular.element(newOb).cloneCanvas() : angular.element(newOb).clone(); var attrs = angular.element(element)[0].attributes; angular.forEach(attrs, function(attr){ angular.element(clone).attr(attr.name, attr.value); }); var clone = $compile(clone)(scope.$parent); currentElement.replaceWith(clone); currentElement = clone; } } }); } } }; }) .controller('mainCtrl', function($scope){ $scope.canvasElements = [document.createElement('canvas'),document.createElement('canvas'),document.createElement('canvas')]; $scope.canvasElements.forEach(function(canvas, i){ var ctx = canvas.getContext('2d'); canvas.width = 100; canvas.height = 100; ctx.fillStyle = "#EEE"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "red"; ctx.font="20px Arial"; ctx.fillText("Canvas "+(i+1),7,55); ctx.save(); }); $scope.currentCanvas = $scope.canvasElements[0]; $scope.setNextCanvasAsCurrent = function(){ $scope.currentCanvas = $scope.canvasElements.indexOf($scope.currentCanvas) < 0 ? $scope.canvasElements[0] : $scope.canvasElements.indexOf($scope.currentCanvas) == $scope.canvasElements.length-1 ? $scope.canvasElements[0] : $scope.canvasElements[ $scope.canvasElements.indexOf($scope.currentCanvas) + 1] }; }) 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="app" ng-controller="mainCtrl"> <el element="currentCanvas"></el> <br> <button ng-click="setNextCanvasAsCurrent()">Set Next Canvas As Current</button> {{canvasElements.indexOf(currentCanvas) + 1}} / {{canvasElements.length}} </div>