Question

angular的文档说，要在控制器被销毁时执行清理代码，应该在范围内注册$ destroy事件。

$scope.$on("$destroy", function() { ... } );

但是，当您使用controllerAs语法时，您无权访问$ scope。你将如何注册$ destroy事件？

Answer 1

仅仅因为您使用controllerAs语法，它并不意味着没有$scope或您无法使用它。

事实上，controllerAs所做的就是在this（指定名称下）添加控制器$scope。 E.g：

ng-controller="SomeCtrl as ctrl"

将隐含地执行此操作：

.controller('SomeCtrl', function () {
    this.value = 'something';
    ...

    // Angular will implicitly so something equivalent to:
    // $scope.ctrl = this;
}

所以，没有什么可以阻止你使用$scope（它实际上对$watch东西和发送/侦听事件非常有用：

<!-- In the VIEW -->
<div ng-controller="SomeCtrl as ctrl">
    Some value: {{ctrl.value}}
    <button ng-click="ctrl.doSomething()">Some action</button>
</div>

/* In the CONTROLLER */
.controller('SomeCtrl', function ($scope) {
    this.value = 'some value';
    this.doSomething = function () { ... };

    $scope.$on('$destroy', function () {
        // So some clean-up...
    });
});

另请参阅此 short demo 。

Answer 2

也可以不注入$ scope：

.controller('SomeCtrl', function () {
    var vm = this;
    vm.$onDestroy = function(){
        console.log( 'destroying....' );
    }   
}

Answer 3

你知道有一个依赖项$element，如果你在控制器中注入它会给你放置ng-controller指令的DOM。因此，在控制器内部注入$ element＆amp;然后把听众放在下面

$element.on('$destroy', function(){
   //write clean up code here
})

angularjs controllerAs注册$ destroy

3 个答案: