angularjs - 为什么$ stateChangeStart会多次触发？

Question

我正在尝试在 Controller 的ui路由器中使用$stateChangeStart。似乎每次触发时，回调都比上次触发+1次。

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
    console.log('$stateChangeStart');
});

例如，在第一次更改时，console.log会被触发一次。第二次console.log将被触发两次，依此类推。

我知道使用event.preventDefault()可以停止这种行为，但是它也会停止所有行为，这对我来说不是一个现实的解决方案。

我确实有一个解决方案，尽管我觉得可能有一种更智能的方式来处理此问题:

var stateChangeStarted = false;
$rootScope.$on('$stateChangeStart', function(event){
    if(!stateChangeStarted) {
        stateChangeStarted = true;
        console.log('$stateChangeStart');
    }
});

有谁知道为什么会这样，还有我能做些什么来防止这种情况发生？

Answer 1

每次您输入与 Controller 关联的状态时， Controller 都会被ui-router实例化。因此，每次进入该状态时，您的$rootScope.$on调用都会向$stateChangeStart事件添加一个新的监听器。

如果只需要每个 Controller 实例处理一次事件，则可以保存$rootScope.$on返回的注销函数，并在监听器回调中执行它。

var deregisterStateChangeStart = $rootScope.$on('$stateChangeStart', function (event) {
    // Do something here.

    deregisterStateChangeStart();
});