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

问题描述

我对角度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对象.(存储在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屋！