$locationChangeSuccess 触发四次

我是 Angular Js 的新手。

我的申请流程如下：

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

2）面包屑工厂从视图控制器获取数据并将数据附加到 $location.$$state 对象。（存储在状态对象中的原因是如果按下后退按钮，视图控制器不会实例化，因此我可以引用面包屑的历史数据）下面是将数据附加到状态对象的代码：

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

3）我还在全局标题上创建了面包屑指令，它将在 $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 次。我真的不知道是什么导致这个回调函数执行四次，而且我对问题一无所知，也不知道如何调试。请大家帮忙！

在我自己遇到这个问题之后，问题在于您正在使用根范围从指令中绑定 locationChangeSuccess 事件，该指令要么在单个页面上多次遇到，要么在您重新访问页面时多次遇到：

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

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

在链接函数中，您应该为元素 $destroy 添加一个侦听器，并捕获原始绑定的返回值，以便稍后可以取消绑定它。

第一：捕获返回值：

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

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

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

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