从 dom 中删除指令后使用 $scope.$destroy()答案

【问题标题】：Using $scope.$destroy() after removing directive from dom从 dom 中删除指令后使用 $scope.$destroy()
【发布时间】：2015-07-01 14:07:45
【问题描述】：

我有一个指令，我用 ng-if 条件切换。该指令使用 jqlite 函数在 DOM 上添加元素（例如一些动画）。

但即使指令不存在于 DOM 中，添加动画的 jqlite 函数也会被触发。

我认为使用 ng-if 删除指令是不够的，但它的作用域也需要删除。

somepage.html - 已编辑

<directivename class="classname1" ng-if="condition">
</directivename>

directive.js

return{
controller:function($scope,$element,$rootScope){
/*adding and removing elemnts to dom */
}
}

我应该如何使用 $scope.$destroy() ？

当我看到 $element 变量的值时，它有以下

$$hashKey: "object:336"
accessKey: ""
attributes: NamedNodeMap
baseURI: ""
childElementCount: 1
childNodes: NodeList[3]
children: HTMLCollection[1]
classList: DOMTokenList[3]
0: "classname1"
1: "ng-scope"
2: "ng-isolate-scope"
length: 3

classname1 指的是我给指令的类名。但是那个指令在 DOM 中不存在。仍然 $element.classList 包含那个类名。

是否与 $scope.$destroy() 问题有关？

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

$destroy() 做什么？

AngularJS 指令中的操作顺序很重要因为 jQuery 实现 .remove() 方法的方式。当你使用 .remove() 或 .empty() 从 DOM 中删除一个元素，jQuery 将清除事件绑定和与元素以避免内存泄漏。这意味着，如果您删除在触发“$destroy”事件之前，该元素将是在您的 $destroy 事件处理程序启动时处于“已清理状态” 执行。

在你的指令中，你应该这样称呼它

ctrl.directive('directivename', function() {
    return function(scope, element, attributes) {        
        scope.$on('$destroy', function() {
            //Code to be execute just before destroying this directive or broadcast any mesage
        });
    };
});

【讨论】：

【解决方案2】：

你可以使用：

return{
controller:function($scope,$element,$rootScope){
  $scope.$on('$destroy',function(){
    /*adding and removing elemnts to dom */
  }
}
}

【讨论】：

我在想 $element 变量是指 DOM 中的指令，即 somepage.html。如果dom中没有指令，$element变量怎么引用呢？为什么 $element 变量没有更新？
抱歉，我们需要查看演示以了解您遇到的问题

【解决方案3】：

对于动画，如果您使用任何计时器（如 setInterval() 或 $interval of angular），则需要在销毁事件时停止。由于您的指令没有使用隔离范围，因此您可以在控制器本身中注册destroy方法。在destroy方法中清除计时器事件。

$scope.$on('$destroy',function(){
    /*clear your timer here
remove the element */
  }

如果您没有将计时器存储在指令内的任何变量中，最好将其存储在父范围内，即在控制器的任何变量中，然后在销毁方法下清除它。

【讨论】：