当控制器/$scope 被销毁时如何解除绑定外部事件？答案

【问题标题】：How to unbind an external event when a controller/$scope is destroyed?当控制器/$scope 被销毁时如何解除绑定外部事件？
【发布时间】：2013-03-17 11:25:04
【问题描述】：

假设我有一个用于呈现为ng-view 的页面的控制器。

此控制器绑定到外部源（例如应用程序范围的消息总线）的某些事件以更新其模型。这基本上很容易：

function MyController ($scope) {
  $scope.bar = '…';

  externalSource.on('foo', function (data) {
    $scope.$apply(function () {
      $scope.bar = data.bar;
    });
  });
}

问题是：一旦控制器关联的视图不再显示，我如何解除控制器与外部源的绑定？

是否有诸如dispose 事件之类的东西或类似的东西？

或者我的方法完全错误，我应该以其他方式处理类似的事情？如果有，怎么做？

【问题讨论】：

如果你使用 jQuerys on('event', ...) 方法，你可以简单地调用 off('event') 来删除事件。还是我误会了？
这不是一个特别的 angularjs 问题。这取决于您使用的外部事件资源。
是的。我知道如何解除绑定，但我不知道何时/何地进行。这取决于控制器的生命周期，这肯定与 AngularJS 有关。

标签： events controller angularjs

【解决方案1】：

当控制器的作用域被销毁时执行事件解除绑定：

$scope.$on('$destroy', function () { /* Unbind code here */ });

请参阅Scope 文档了解更多信息

【讨论】：

我想你的意思是$scope.$on('$destroy', function() { ... })

【解决方案2】：

使用 $routeChangeStart 或 $routeChangeSuccess 事件：

function MyController ($scope) {
  $scope.bar = '…';

  externalSource.on('foo', function (data) {
    $scope.$apply(function () {
      $scope.bar = data.bar;
    });
  });

  $scope.$on('$routeChangeStart', function(next, current){
    // unregister listener
    // externalSource.off ....
  });
}

...或$destroy事件：

  $scope.$on('$destroy', function(){
    // unregister listener
    // externalSource.off ....
  });

【讨论】：