javascript - 仍在向被破坏的 Controller 范围 Angularjs 广播

Question

我有一个指令，它的回调如下所示:

function Callback(){
    return {
      templateUrl: 'somePath',
      scope: true,
      link: function(scope, el) {
        scope.cancel = function(){
          el.remove()
          scope.$destroy()
        }
      },
      controller: 'someController',
      controllerAs: 'vm'
    }
  }

link 方法只是添加了一个取消方法，该方法从 DOM 中删除该指令。

在指令 Controller 中我正在监听一个事件:

$rootScope.$on('parent', function(){
  someService.addToArray(someData)
})

此方法只是将数据推送到数组。

在父 Controller 和 View 中，在利用该指令的地方，我实际上正在触发广播。父 Controller 部分:

var vm = this
vm.broadcastEvent = broadcastEvent      
function broadcastEvent(){
  $rootScope.$broadcast('someEvent', 'someData')
}

在 View 中，我有一些可点击的 div 来触发此方法。

它工作得很好，在我删除元素并销毁范围之前，指令会听到广播并将数据添加到数组中。

问题是，在我调用 .cancel 后，该元素被删除，并且范围可能被破坏，但它仍然向数组添加数据。我是否遗漏了有关 scope.$destroy() 工作原理的信息？

我可以通过取消注册 $on 来获得我想要的行为，我只需要这样做吗？我想问题是，销毁 Controller 作用域是否会否定其中定义的任何 $on，或者您是否需要确保在销毁作用域之前显式取消注册。

Answer 1

监听器函数在 $rootScope 上注册，并且在指令 $scope 被销毁后仍然存在:

$rootScope.$on('parent', function listener(){
  someService.addToArray(someData)
})

该 Controller 需要保存调用 $rootScope.$on 方法返回的取消注册函数:

this.deregister = $rootScope.$on('parent', function listener(){
  someService.addToArray(someData)
})

取消函数需要调用注销函数:

  link: function(scope, el) {
    scope.cancel = function(){
      el.remove()
      scope.$destroy()
      scope.vm.deregister()
    }
  },
  controller: 'someController',
  controllerAs: 'vm'

<小时/>

shouldn't the deregister happen before the scope is destroyed?

没关系。正如您所发现的，由于监听器是在 $rootScope 上注册的，因此它存储在 $rootScope 上的数组中(特别是 $rootScope.$$listeners)。通过调用取消注册函数将其从 $rootScope.$$listeners 中删除。

这是面向对象的运行时(例如 JavaScript)的本质，只有当对对象的所有引用都被销毁时，对象才会从内存中删除(垃圾收集)。由于对监听​​器函数的引用存储在 $rootScope 上，因此它(及其执行上下文)将保留下来。

如果监听器已在指令 $scope 上注册，则当作用域被销毁时，它会自动取消注册。