当ui-路由器上的更改状态(带有视频)时，angularjs infdig错误

New Edit: the authservice that checks the login:

新编辑:检查登录的authservice:

'use strict';

angular.module('MainApp.login.services', [])
    .factory('authService', ['AUTH_ENDPOINT', 'LOGOUT_ENDPOINT', '$http', '$cookieStore', function (AUTH_ENDPOINT, LOGOUT_ENDPOINT, $http, $cookieStore) {
        var auth = {};
        auth.login = function (username, password) {
            return $http.post(AUTH_ENDPOINT, {username: username, password: password})
                .then(function (response, status) {
                    auth.user = response.data;
                    $cookieStore.put('user', auth.user);
                    return auth.user;
                });
        };
        auth.logout = function () {
            return $http.post(LOGOUT_ENDPOINT).then(function (response) {
                auth.user = undefined;
                $cookieStore.remove('user');
                $cookieStore.remove('event');
            });
        };
        return auth;
    }])
    .value('AUTH_ENDPOINT', 'http://www.mydomain.gr/assets/modules/login/dal/login.php')
    .value('LOGOUT_ENDPOINT', 'http://www.mydomain.gr/assets/modules/login/dal/logout.php');  

Updated:
Unfortunatelly this is a part of a whole web-application , so i cant upload it on jsfiddle. I made a youtube video where i show exactly the error while i debug the application. From minute 1:30 starts the problem.Feel free to examine the video
below is the app.js of my angular application.

更新:不幸的是，这是整个web应用程序的一部分，所以我不能将它上传到jsfiddle。我在youtube上制作了一个视频，在调试应用程序时显示错误。从1点30分开始。请检查以下视频是我的角应用程序的app.js。

Could the $watch(es) that i have into the templates ,create the error?

我在模板中的$watch(es)可以创建错误吗?

Youtube, after 1:30 starts the error : https://www.youtube.com/watch?v=3Cc2--BkdQ4&feature=youtu.be

在1:30之后，Youtube开始出现错误:https://www.youtube.com/watch?

When first load the site , the login screen loads and asks for the credentials.

当首次加载站点时，登录屏幕将加载并请求凭证。

If the user login it redirects to the part4 page(from inside the login controller) , so far so good!

如果用户登录，它将重定向到part4页面(从登录控制器内部)，到目前为止一切顺利!

The problem is whenever i open a new tab on the browser , try to load the website:

问题是，每当我在浏览器上打开一个新标签时，试着加载网站:

1. It should see that the user is already loged in and redirect him on the part4 page.

   它应该看到用户已经被输入并在part4页面上重定向他。

2. instead of this , as i see on the debug of the browser , it goes to the resolve:login

   与此相反，正如我在浏览器的调试中看到的，它进入了解决方案:登录

3. Then it goes up inside $rootScope.$on('$stateChangeError', and to the go.state(part4)

   然后它在$rootScope内上升。$on($stateChangeError)和go.state(part4)

4. Then it goes to the resolve of part4 and then it goes to the resolve of the login and again to the $statechangeerror function

   然后是第4部分的解析，然后是登录的解析，然后是$statechangeerror函数

5.And finally i get the error :Error: [$rootScope:infdig] http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5D but the strange is that it finally redirects to the part4 page, but with that error!!

5。最后我得到了错误:error: [$rootScope:infdig] http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5D，但奇怪的是它最终重定向到part4页面，但是有这个错误!!

Can anyone help me please.

有人能帮我吗?

'use strict';

var app = angular.module('MainApp', ['mApp',
    'MainApp.loginModule',
    'MainApp.part4Module',
    'MainApp.part5Module',
    'MainApp.eventModule',
    'ui.router', 'ui.router.tabs', 'ngCookies']);

angular.module('MainApp')
    .run(['$rootScope', '$state', '$cookieStore', 'authService', function ($rootScope, $state, $cookieStore, authService) {
        $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
            if (error.unAuthorized) {
                $state.go('login');
            }
            else if (error.authorized) {
                $state.go('part4');
            }
        });

        authService.user = $cookieStore.get('user');
    }])
    .config(function ($stateProvider, $urlRouterProvider, $locationProvider) { //$stateProvider & $urlRouterProvider are from ui.router module
        $stateProvider
            .state('floorplan', {
                url: '/floorplan/:activeEventId/:activeHallId/:activeHallVariant',
                controller: 'ParticipantsCtrl',
                templateUrl: '/assets/modules/part1/part1.html',
                resolve: {
                    user: ['authService', '$q', function (authService, $q) {
                        return authService.user || $q.reject({unAuthorized: true});
                    }]
                }
            })
            .state('event', {
                url: '/event/:activeEventId',
                templateUrl: 'assets/modules/event/eventPartial.html',
                controller: 'eventctrl',
                resolve: {
                    user: ['authService', '$q', function (authService, $q) {
                        return authService.user || $q.reject({unAuthorized: true});
                    }]
                }
            })
            .state('part4', {
                url: '/part4',
                resolve: {
                    user: ['authService', '$q', function (authService, $q) {
                        return authService.user || $q.reject({unAuthorized: true});
                    }]
                },
                controller: 'part4ctrl',
                templateUrl: '/assets/modules/part4/part4Partial.html'
            })
            .state('login', {
                url: '/login',
                controller: 'LoginCtrl',
                templateUrl: '/assets/modules/login/login.html',
                resolve: {
                    user: ['authService', '$q', function (authService, $q) {
                        if (authService.user) {   
                         return $q.reject({authorized: true});
                        }
                    }]
                }
            });
        $urlRouterProvider.otherwise('login');
    });

I uploaded a video on youtube , describing and showing the error: youtube: https://www.youtube.com/watch?v=3Cc2--BkdQ4&feature=youtu.be

我在youtube上上传了一段视频，描述并显示了错误:youtube: https://www.youtube.com/watch?

3 个解决方案

#1

I think the state is resolved first because you inject $state in your app.run.

我认为状态首先得到解析，因为您在app.run中注入了$state。

Which lead to try to resolve the part4 state's resolve with undefined user, then the event is thrown and will be resolved on the next digest cycle, so the use is initialized before you get redirecit to login page, which will redirect you to part4.

这将导致尝试使用未定义的用户解析part4状态的解析，然后抛出事件并在下一个摘要周期中解析，因此在您将其重定向到登录页面之前对使用进行了初始化，该页面将把您重定向到part4。

Try to separate in two angular.run, the 1st that will run the init of the authService without injectingt $state. The 2nd that will inject the $state to init the$stateCHangeError listener (just defining the 1st one before the 2nd one).

尝试在两个angular.run中分离，第一个运行authService的init，而不需要注入$state。第2个将注入$state来初始化$stateCHangeError监听器(仅定义第1个在第2个之前)。

If it's not enough : split your module : the one containing the authService in a module 'A' with the dedicated angular.module('A').run, the 2nd in a module 'B' with a dependency toward 'A' with the angular.module('B').run for the $stateChangeError

如果还不够:将模块拆分:模块a中包含authService的模块，带有专用的angular.module(' a ').run，模块B中的第二个模块，与angular.module('B')的' a '依赖关系，运行$stateChangeError

#2

Can you try this inverted?

你能试试这个倒过来吗?

.run(['$rootScope', '$state', '$cookieStore', 'authService', function ($rootScope, $state, $cookieStore, authService) {
    $rootScope.$on('$stateChangeStart', function (...) {
    authService.user = $cookieStore.get('user');
                if (authService.user) {
                    $state.go('part4');
                }
                else if (!authService.user) {
                    $state.go('login');
                }
            });
}

This will skip the to and fro to the $q within your resolve in each route's declaration. Second, this will also resolve you/r checking user all the time within resolve of each route. In .config() set authService.user = $cookieStore.get('user'); somewhere. Should resolve your issue.

这将在每个路由声明中跳过到您的解析中的$q。其次，这也将在每个路由的解析中始终解析您/r检查用户。在config()设置authService。用户= $ cookieStore.get(“用户”);在某处。要解决你的问题。

#3

Everything seems ok.

After many hours and many breakpoints i realized that the problem was not caused by any $watch(), i have many $watch on my controllers.

在许多小时和许多断点之后，我意识到问题不是由任何$watch()引起的，我的控制器上有许多$watch。

It is just a state problem, as you can see on my question , i didnt have '/' state, and that caused the infinite loop ,because:

它只是一个状态问题，正如你在我的问题中看到的，我没有'/'状态，这导致了无限循环，因为:

1. when i delete the extension part of the url , i have : www.mydomain.com/ , then the $stateProvider searches my available 'states' but couldnt find '/' state, so it redirects to 'login' state.
2. 当我删除url的扩展部分时，我有:www.mydomain.com/，然后$stateProvider搜索我可用的'state '，但无法找到'/'状态，所以它重定向到'login'状态。
3. Into 'login' state i check if user==true and reject error.
4. 在“登录”状态中，我检查user== =true并拒绝错误。
5. Then , $rootScope.$on('$stateChangeError'){..} executes and i call state.go('part4') , it resolves state 'part4' and again it goes to state 'login' resolve ,and again the same until the maximum number of allowed iterations of the $digest cycle reached.
6. 然后,rootScope。在美元($ stateChangeError){…执行}，我调用state.go('part4')，它解析state 'part4'，然后又返回state 'login' resolve，直到达到$digest循环允许的最大迭代次数为止。

How i solved it

I dont know if it is the best way but i added a '/' state on app.js, and it works as expected:

我不知道这是不是最好的方法，但我在app.js上添加了一个'/'状态，它可以像预期的那样工作:

.state('/', {
                url: '/',
                controller: 'LoginCtrl',
                templateUrl: '/assets/modules/login/login.html',
                resolve: {
                    user: ['authService', '$q', function (authService, $q) {
                        if (authService.user) {
                            return $q.reject({authorized: true, user: authService.user});
                        }
                    }]
                }
            });