$onDestroy 和 Angular 1.5 组件之间的差异$scope.$destroy() [英] Angular 1.5 Components difference between $onDestroy & $scope.$destroy()

问题描述

我试图了解控制器的 $onDestroy 方法和 $scope.$destroy() 之间的区别.

定义表示当组件的包含范围需要销毁时调用 $onDestroy.但是 $scope.$destroy() 不是一样的情况吗?

根据我在 https://plnkr.co/edit/上创建的 plunker9RlS8OLxAoyK80WPMJaN?p=预览 ,

<button ng-click="func()">父</button><br><br><div ng-controller="ChildController"><button ng-click="childFunc()">子</button><br><br><comp>

我注意到两种情况.

1. 当我从父控制器或子控制器调用 $destroy() 时，组件中会触发 $onDestroy 和 $scope.$on('$destroy') 事件.这是有道理的，因为当父作用域被销毁时，组件的包含作用域也会被销毁.但是，我仍然可以单击Component FUNC"按钮并调用与其关联的函数.为什么会发生这种情况?

2. 当我从组件本身调用 $destroy() 时，只有 $scope.$on('destroy') 事件被触发，而 $onDestroy 未触发.此外，我无法像在案例 1 中那样访问组件功能"按钮.

有人可以解释一下这两种情况的区别吗?

这不是现实生活中的用例，而是我想了解的东西.

谢谢.

解决方案

查看以下链接:

https://github.com/angular/angular.js/issues/15073
https://github.com/angular/angular.js/issues/14376

总而言之，他们给出的解释如下:

<块引用>

有一种误解，认为 controller.$onDestroy() 等价于 $scope.$on('$destroy')，其中 $scope 是传递给控制器​​的作用域.情况并非总是如此.

更具体地说，controller.$onDestroy() 在控制器居住"的范围内被调用.被摧毁.当你有一个隔离范围指令时，传递给控制器​​的范围(作为 $scope)不是控制器所在的范围，它是为指令模板创建的子范围.因此，调用 $scope.$destroy() 不会破坏控制器所在的作用域(也不会调用 controller.$onDestroy()).

controller.$onDestroy() 等价于 $scope.$on('$destroy') 的唯一情况是当指令的作用域为 false 时.这意味着不会创建新的作用域，因此传递给控制器​​的作用域(作为 $scope)与控制器所在的作用域相同.

这解释了第二种情况，但我仍然不明白为什么即使在您调用了 $destroy() 之后，您仍然可以调用与Component FUNC"按钮关联的函数.

我希望这会有所帮助.

I'm trying to understand the difference between the controller's $onDestroy method and $scope.$destroy().

Definition says that $onDestroy is called when the containing scope of the component needs to be destroyed. But isn't it the same case with $scope.$destroy()?

As per the plunker I've created at https://plnkr.co/edit/9RlS8OLxAoyK80WPMJaN?p=preview ,

<div ng-controller="ParentController">
    <button ng-click="func()">Parent</button>
    <br><br>
    <div ng-controller="ChildController">
      <button ng-click="childFunc()"> Child </button>
      <br><br>
      <comp> </comp>
    </div>
</div>

I've noticed two situations.

1. When I call $destroy() from the Parent or Child controller, both $onDestroy and $scope.$on('$destroy') events are triggered in the Component. This makes sense as the containing scope of the component is destroyed when the Parent scope is destroyed. However, I'm still able to click the 'Component FUNC' button and call the function associated with it. Why does this happen?

2. When I call $destroy() from the Component itself, then only the $scope.$on('destroy') event is triggered leaving behing the $onDestroy untriggered. Also, I'm not able to access the 'Component FUNC' button as I was able to do in Case #1.

Can someone please explain me the difference in the two cases?

This is not a real life use-case but something that I wanted to understand.

Thank you.

解决方案

Take a look at the following links:

https://github.com/angular/angular.js/issues/15073
https://github.com/angular/angular.js/issues/14376

To summarize, the explanation they give is the following:

There is a misconception that controller.$onDestroy() is equivalent to $scope.$on('$destroy'), where $scope is the scope passed to the controller. This is not always the case.

More specifically, controller.$onDestroy() is called when the scope where the controller "lives in" gets destroyed. When you have an isolate scope directive, the scope passed (as $scope) to the controller is not the scope that the controller lives in, it is a child-scope that is created for the directive's template. Thus, calling $scope.$destroy() will NOT destroy the scope that the controller lives in (and NOT call controller.$onDestroy()).

The only case, where controller.$onDestroy() is equivalent to $scope.$on('$destroy') is when having a directive with scope: false. This means that no new scope is created, so the scope passed (as $scope) to the controller is the same scope that the controller lives in.

This explains the second situation, but I still don't get why you can call the function associated with the 'Component FUNC' button even after you have called $destroy().

I hope this helps.

这篇关于$onDestroy 和 Angular 1.5 组件之间的差异$scope.$destroy()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！