在 AngularJS 中注销活动

Question

有一个控制器，MyCtrl：

class MyCtrl {
    constructor($scope, $rootScope, ...) {
        this.$scope = $scope;
        this.$rootScope = $rootScope;
        this.doThis = _debounce(this.resize.bind(this), 300);
        ...
    }
    $onInit() { ... }
    $onDestroy() { ... }
}

里面$onInit叫做$rootScope.$on。像这个一样，是另一个控制器，它执行相同的操作但针对不同类型的页面，比方说 MyCtrl2。当我从第一个转到第二个时，第一个一直被调用，因为它没有被破坏。我使用中描述的方法通过添加注销解决了这个问题。 $onInit 现在：

$onInit() {
    this.$rootScope.$on('toggleNav', () => {
        this.doThis();
    });
    this.deregisterDoThis = this.$rootScope.$on('listen', function() {
        this.$scope.doThis();
    });
    this.$rootScope.$on('$destroy', this.deregisterDoThis);
}

现在，如果我从第一个控制器的页面转到第二个控制器的页面，一切正常。但是，当我单击返回第一个页面时，控制台中出现错误：

 Uncaught TypeError: Cannot read property 'getAttribute' of null
    at $.t.default [as attr] (vendor.dll.js?aca3f637cd46c07f3280:135)
    at attachNotes (VM133106 chart-util.js:1016)
    at invokeFunc (debounce.js?e59c:95)
    at trailingEdge (debounce.js?e59c:144)
    at timerExpired (debounce.js?e59c:132)

对此有什么想法吗？

Answer 1

$rootScope.$on('$destroy') 永远不会被调用，因为 $rootScope 永远不会被销毁。

$onInit() {
    this.deregisterToggleNav = this.$rootScope.$on('toggleNav', () => {
        this.doThis();
    });
    this.deregisterDoThis = this.$rootScope.$on('listen', ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶ () => {
        ̶t̶h̶i̶s̶.̶$̶s̶c̶o̶p̶e̶.̶d̶o̶T̶h̶i̶s̶(̶)̶;̶
        this.doThis();
    });
    ̶t̶h̶i̶s̶.̶$̶r̶o̶o̶t̶S̶c̶o̶p̶e̶.̶$̶o̶n̶(̶'̶$̶d̶e̶s̶t̶r̶o̶y̶'̶,̶ ̶t̶h̶i̶s̶.̶d̶e̶r̶e̶g̶i̶s̶t̶e̶r̶D̶o̶T̶h̶i̶s̶)̶;̶
}

改为使用 $onDestroy 生命周期挂钩：

$onDestroy() {
    this.deregisterToggleNav();
    this.deregisterDoThis();
}

有关详细信息，请参阅

AngularJS $compile Service API Reference - Life-Cycle Hooks

在 AngularJS 中注销活动

Deregister an event in AngularJS

javascript

angularjs

angularjs-scope

rootscope