javascript - 在 AngularJS 中删除 DOM 元素之前我应该​​做什么？

Question

我记得听说过在从 DOM 中删除元素之前需要销毁该元素的作用域。但我不确定这是如何完成的。

所以，碰巧我有一个从 DOM 中删除元素的指令。精简版如下所示:

(function() {
    angular.module('app').directive('remove', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.children().remove();
                element.remove();
            }
        }
    }]);
}());

一个简单但不切实际的例子是这样的 <my-directive-with-isolated-scope remove></my-directive-with-isolated-scope>

我可以删除该元素，但范围似乎并没有被破坏，我认为这会造成内存泄漏，对吧？我还设置了一个 $interval在指令的 Controller (具有隔离作用域的 Controller )中，我设置了一条控制台消息作为测试。我可以看到，当它从 DOM 中删除时，它仍会按设置的时间间隔输出一条控制台消息。

我是否会修改上面指令中的某些内容以正确删除元素？

Answer 1

一些尝试元素/范围破坏的实验:

您可以做一个测试，看看范围何时被销毁，如下所示:

scope.$on('$destroy', function(){
    console.log('Scope Destroyed!');
});

您还可以测试元素是否被销毁:

element.on('$destroy', function(){
    console.log('Element Destroyed!');
});

(请参阅 angular.element docs 的事件部分)

现在，关于间隔:

无论范围是否存在，$interval 都会一直运行到您$interval.cancel()(除非回调是绑定(bind)到 的某个函数) scope 在这种情况下，回调可能会变成未定义的，我不确定 $interval 是如何处理的。

如果您的指令正在运行一个 $interval 函数，您可能有类似的东西:

var count = 0;
var timer = 
    $interval( function doingStuff () {
        console.log( count + ' seconds ...' );
    }, 1000 );

scope.$on('$destroy', function cleanup () {
    $interval.cancel( timer );
});

关于需要手动销毁作用域:

如果您通过 var myScope = $scope.$new(); 手动创建范围，则您有责任通过 myScope.$destroy(); 销毁它.我会说这是一种更高级的用法，我想不出任何真正常见的手动创建新范围的原因。 (也许如果你的指令是创建一个元素并使用全新的范围$compile它)