javascript - 如何删除 Controller 先前实例的功能？

Question

我有一个简单的 angularjs Controller ，引用为 someCtrl ，它包含以下代码:

function testing() {
    console.log("Hello there.");
}

$document.on('click', function(e) {
    testing();
});

this.getView = function(value) {
    return viewService.getView(value);
};

this.setView = function(value) {
    viewService.setView (value);
};

this.destroy = function() {
    $state.reload('default_state');
};

当单击事件发生时，testing() 函数将执行，并且某些内容会记录到控制台。后来我的默认 viewA 使用服务和 ng-show 指令更改为 viewB:

<div ng-show="someCtrl.getView('viewA')">
   Content
</div>

<div ng-show="someCtrl.getView('viewB')">
    <a ng-click="someCtrl.setView('viewA'); someCtrl.destroy();">go to viewA</a>
</div>

然后，当点击事件发生时，如果我一次又一次地更改 View ，testing() 函数每次点击都会执行两次甚至多次......为什么会发生这种情况？ Controller 的两个实例是否处于事件状态？ $state.reload 不会杀死 Controller 一个实例的属性吗？我真的很感激一些帮助:)

Answer 1

尽管事件是从 Controller 附加的，但它们不会自动从 DOM 中清除。您可以通过确保事件仅绑定(bind)一次来做到这一点。您可以先取消绑定(bind)它，然后再次绑定(bind)它。

代码

$document.unbind('click');//ensure it will bind once
$document.bind('click', function(e) {
    testing();
});

更具体地说，您不应该使用文档的 click 事件，那么您应该通过执行 click.testing 来命名您的事件，然后您的代码会看起来更聪明。因为有时您执行 $document.unbind('click') 将从 document

中删除 click 事件

已更新

代码

$document.unbind('click.custom');//ensure it will bind once
$document.bind('click.custom', function(e) {
    testing();
});

NOTE

Bad practice to put DOM event listeners inside angular controller, better create a controller that would extend this functionality.