$locationChangeSuccess 触发四次

Question

我是 angular Js.

的新手

我的申请流程如下：

1) 我有一个视图控制器，其中每个视图控制器都在 Breadcrumbs 工厂的帮助下设置面包屑数据。

2) 面包屑工厂从视图控制器获取数据并将数据附加到 $location.$$state object。（存储在状态 object 中的原因是如果按下后退按钮，视图控制器没有实例化，所以我可以参考面包屑的历史数据）下面是将数据附加到状态的代码 object:

var state = $location.state();
state.breadcrumb = breadcrumbData;
$location.replace().state(state);

3) 我还在全局 header 上创建了面包屑指令，它将在 $locationChangeSuccess 事件中显示面包屑。指令将从 $location.state(); 获取数据；出厂设置。

我的问题是当位置改变时，$locationChangeSuccess 事件回调函数执行四次。

下面是我的指令代码：

angular.module('cw-ui')
    .directive('cwBreadcrumbs', function($location, Breadcrumbs, $rootScope) {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'UI/Directives/breadcrumb',
        link: function($scope, element){
            //some code for element...

            $rootScope.$on('$locationChangeSuccess', function(event, url, oldUrl, state, oldState){

                // get data from history of location state    
                var data = $location.state();

                console.log(data);
            });
        }
    };
});

输出如下：

Object {}
Object {key: "Core/Views/dash:1", view: "Core/Views/dash", parameters: Array[0], breadcrumb: Array[2]}
Object {key: "Core/Views/dash:1", view: "Core/Views/dash", parameters: Array[0]}
Object {key: "Core/Views/dash:1", view: "Core/Views/dash", parameters: Array[0]}

面包屑：Array[2] 第 1、3、4 次消失。我真的不知道是什么导致这个回调函数执行了四次，而且我对问题一无所知，也不知道如何调试。请大家帮忙！

Answer 1

我自己运行之后，问题在于您正在使用根作用域从一个指令中绑定 locationChangeSuccess 事件，该指令要么在单个页面上多次遇到，要么遇到多次重新访问页面的次数：

$rootScope.$on('$locationChangeSuccess', function(event, url, oldUrl, state, oldState){

由于您正在绑定到 rootScope，并且 rootScope 没有超出范围，因此不会为您清除事件绑定。

在您的 link 函数中，您应该为元素 $destroy 添加一个侦听器，并从原始绑定中捕获 return 值，以便稍后可以解除绑定。

首先：捕获return值：

var unbindChangeSuccess = $rootScope.$on('$locationChangeSuccess' ...

接下来，在您的 destroy 方法中取消绑定该值：

element.on('$destroy', function() {
    unbindChangeSuccess();
});

这应该可以解决对您的 locationChangeSuccess 的多次调用！ :)

$locationChangeSuccess 触发四次

$locationChangeSuccess triggers four times

angularjs

angularjs-directive

angularjs-scope

angular-ui-router

state