javascript - 指令中的 element.remove() 将所有 sibling 的 parentElement/Node 设置为 null

Question

我有一个指令，点击一个按钮应该添加另一个指令，点击另一个按钮应该删除该指令。下面的代码添加了指令，但在单击“删除”按钮后，无法添加更多元素。

app.directive('chart', ['$compile', function($compile) {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            scope.addNew = function () {
                //add new sibling
                element.after('<chart></chart>');
                //compile so template is inserted
                $compile(element.parent().contents())(scope)
            }
            scope.remove = function () {
                //if parent contains >1 <chart>, delete self
                if (element.parent().children().length > 1) {
                    element.remove();
                }
            }
        },
        template: '<div>' +
                      '<button ng-click="addNew()">Add new</button>' +
                      '<button ng-click="remove()">Remove</button>' +
                  '</div>'
    }
}]);

这似乎是因为 parentElement/parentNode在单击“删除”后，所有其他同级指令变为 null，即使该元素仍然有一个父元素并且它是一个不同的被删除的元素。

我试过了element.replaceWith('')和 element.html('') . replaceWith()作用与remove()相同和 html()刚刚清除了 <chart> 的内容标记(导致编译操作在添加另一个指令时重新绘制指令)。

为什么是parentElement/parentNode删除子元素时变为 null，有没有办法在指令中添加和删除元素指令？

plunker

Answer 1

那是因为所有 chart 兄弟都共享同一个作用域对象，它看起来是 $rootScope。

scope.remove() 和 scope.addNew() 函数将在每次编译任何 chart 指令时被覆盖。

因此，当您添加或删除图表时，这些方法中的 element 变量可能指向底部的最后一个元素，而不是被点击的元素。

要解决这个问题，只需将 scope: true 添加到指令定义对象中，以确保每个 chart 指令都有自己的范围。

示例 Plunker: http://plnkr.co/edit/iRcP60u8kBkH9FEhRxBA?p=preview

其他潜在问题，在这一行:

element.after('<chart></chart>');
$compile(element.parent().contents())(scope);

这意味着每个 sibling 也将被重新编译。如果只编译新元素会更好。

var newElement = $compile('<chart></chart>')(scope.$parent);
element.after(newElement);