Question

我是棱角分明Js的新手。

我的申请流程如下：

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

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

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

3）我还在全局标题上创建了breadcrumb指令，它将在$ locationChangeSuccess事件上显示面包屑。 Directive将从$ 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]}

breadcrumb：数组[2]第1次，第3次和第4次消失。我真的不知道是什么导致这个回调函数执行四次，我不知道一个问题，不知道如何调试。请帮帮我们！

Answer 1

自己遇到这个问题后，问题在于你使用根作用域绑定了一个指令中的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的多次调用！ :)

$ locationChangeSuccess触发四次

1 个答案: