$locationChangeSuccess 触发四次 [英] $locationChangeSuccess triggers four times

问题描述

我是 Angular Js 的新手.

I am new to angular Js.

我的申请流程如下:

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

1) I have a view controller wherein, each view controller sets the breadcrumb data with the help of Breadcrumbs factory.

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

2) Breadcrumbs factory takes data from view controller and attaches data to $location.$$state object.(reason for storing in state object is if back button is pressed, view controller doesn't instantiate so I can refer history data for breadcrumbs ) below is code to attach data to state object:

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

3) 我还在全局标题上创建了面包屑指令，它将在 $locationChangeSuccess 事件上显示面包屑.指令将从 $location.state() 获取数据；这是在工厂设置的.

3) I have also created breadcrumb directive on global header which will display breadcrumbs on $locationChangeSuccess event. Directive will take data from $location.state(); which was set in factory.

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

My problem is when location is changed, $locationChangeSuccess event callback function executes four times.

下面是我的指令代码:

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 次.我真的不知道是什么导致这个回调函数执行四次，我对问题一无所知，也不知道如何调试.请大家帮帮忙！

breadcrumb: Array[2] disappears 1st, 3rd and 4th times. I really don't know what is causing this callback function execute four times, and I have no clue about an issue and don't know how to debug. Please help guys!

推荐答案

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

After running into this myself, the problem lies in the fact you are using the root scope to bind the locationChangeSuccess event from within a directive that is either encountered multiple times on a single page, or encountered multiple times as you revisit the page:

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

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

Since you are binding to the rootScope, and the rootScope does not go out of scope, the event binding is not cleaned up for you.

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

Inside your link function, you should add a listener for the element $destroy, as well as capture the return value from the original bind, so you can later unbind it.

首先:捕获返回值:

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

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

Next, unbind that value in your destroy method:

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

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

That should solve the multiple calls to your locationChangeSuccess! :)

这篇关于$locationChangeSuccess 触发四次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！