$onDestroy 和 $scope.$destroy() 之间的 Angular 1.5 组件区别答案

【问题标题】：Angular 1.5 Components difference between $onDestroy & $scope.$destroy()$onDestroy 和 $scope.$destroy() 之间的 Angular 1.5 组件区别
【发布时间】：2017-06-06 22:08:05
【问题描述】：

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

定义说当组件的包含范围需要被销毁时调用 $onDestroy。但是 $scope.$destroy() 不也是这样吗？

根据我在 https://plnkr.co/edit/9RlS8OLxAoyK80WPMJaN?p=preview 创建的 plunker，

<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>

我注意到两种情况。

当我从 Parent 或 Child 控制器调用 $destroy() 时，组件中都会触发 $onDestroy 和 $scope.$on('$destroy') 事件。这是有道理的，因为当父范围被破坏时，组件的包含范围也被破坏。但是，我仍然可以单击“组件 FUNC”按钮并调用与其关联的函数。为什么会这样？
当我从组件本身调用 $destroy() 时，只会触发 $scope.$on('destroy') 事件，而不会触发 $onDestroy。此外，我无法像在案例 #1 中那样访问“组件功能”按钮。

谁能解释一下这两种情况的区别？

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

谢谢。

【问题讨论】：

标签： javascript angularjs scope angular-components

【解决方案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() 之后，仍然可以调用与“组件 FUNC”按钮关联的函数。

我希望这会有所帮助。

【讨论】：