Question

我有一个指令，我用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（）问题？

Answer 1

$ destroy（）做什么？

AngularJS指令中的操作顺序非常重要   因为jQuery实现.remove（）方法的方式。当你   使用.remove（）或.empty（），jQuery从DOM中删除一个元素   将清除事件绑定和与之关联的数据   元素以避免内存泄漏。这意味着如果你删除了   在触发＆＃34; $ destroy＆＃34;之前的元素事件，元素将是   处于消毒状态＆＃34;到你的$ 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
        });
    };
});

Answer 2

您可以使用：

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

Answer 3

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

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

如果你没有将你的计时器存储在指令中的任何变量中，你可以将它存储在父对象范围内，即在控制器的任何变量中，然后在destroy方法下清除它。

从dom

3 个答案: