Angularjs破坏不起作用答案

【问题标题】：Angularjs destroy is not workingAngularjs破坏不起作用
【发布时间】：2015-06-09 04:05:44
【问题描述】：

http://plnkr.co/edit/UfQJU661pQR0DMY3c61t?p=preview

我从 AngularJs 网站获得了上面的代码，唯一的事情是我添加了一个按钮来删除我们有控制器的 Div，但在删除后没有调用任何销毁方法，因为我在指令和控制器中放置了警报。

element.on('$destroy', function() {
alert('destroy directive interval');
$interval.cancel(stopTime);
});

和

 $scope.$on('$destroy', function() {
alert('destroy controller interval');
// Make sure that the interval is destroyed too
$scope.stopFight();
});

请提出建议。

谢谢

【问题讨论】：

标签： angularjs destroy

【解决方案1】：

需要注意的主要事项

当element.remove() 被执行时，该元素及其所有子元素将从 DOM 中删除，所有事件处理程序都将通过例如 element.on 附加。

它不会破坏与元素关联的$scope。

所以需要手动触发scope.$destroy();

首先获取元素的作用域：-

 var scope = angular.element(document.getElementById("mainDiv")).scope();

第二次从dom中移除元素：-

$('#mainDiv').remove();

第三次手动销毁作用域：-

 scope.$destroy();

Plunker

【讨论】：

@mohamedrias 不完全是首先我解释了为什么它没有触发销毁事件，因为 element.remove() 销毁了所有事件，包括“on”事件，这就是它没有触发销毁事件的原因。然后我逐行解释你的答案:-P 谢谢:)
所以这是一个错误。当 Angular 知道我们要添加控制器和指令的元素时，它可以添加 DOM 删除事件。
不，不是一个错误，它不可能（或者我不确定）角度来监听所有 dom 删除事件:)

【解决方案2】：

你是在 Angular 的上下文之外做的。

<button id="btn" onclick="DeleteMainDiv()">DeleteDiv</button>

所以在你的 DeleteMainDiv() 函数中

 function DeleteMainDiv() {
      alert('Controller div going to remove');
      //debugger;
      var scope = angular.element(document.getElementById("mainDiv")).scope();
      $('#mainDiv').remove();
      scope.$destroy();
    }

这将触发销毁功能。

但我认为没有必要。当路由更改或不再需要指令时，Angular 将自动运行 $destroy 事件处理程序。

DEMO

【讨论】：

你不觉得吗？ Angular 应该在幕后添加观察者，因为 Angular 知道我们要添加控制器或指令的元素是什么。
跟踪所有 DOM 元素会变得非常忙碌。已经有很多关于 Angular 的 $digest 循环的争论，因为它降低了 Angular 的性能。这就是 Angular 2.0 中的原因，他们使用 ES6 观察属性完全重写了摘要循环。如果 Angular 必须跟踪所有 DOM $destroy 事件，那么这将对性能造成影响。但是当路线改变时它会发生。在您的情况下，您已经手动删除了 DOM 元素，因此它不知道它，因为范围仍然有效。