更改ui-router状态时的angularjs infdig错误(带视频)

The*_*ris 11 html javascript angularjs angularjs-scope angular-ui-router

新编辑: 检查登录的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');  
Run Code Online (Sandbox Code Playgroud)

更新:
不幸的是,这是整个网络应用程序的一部分,所以我无法将其上传到jsfiddle.我制作了一个YouTube视频,我在调试应用程序时显示错误.从分钟1:30开始问题.随意检查
下面的视频是我的角度应用程序 的app.js.

我对模板中的$ watch是否可以创建错误?

Youtube在1:30之后启动错误:https://www.youtube.com/watch?v = 3Cc2--BkdQ4 &feature = youtu.be

首次加载站点时,登录屏幕会加载并请求凭据.

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

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

  1. 它应该看到用户已经插入并在part4页面上重定向他.

  2. 而不是这个,正如我在浏览器的调试中看到的那样,它转到了解决方案:登录

  3. 然后,它上升的内部$rootScope.$on('$stateChangeError',和到go.state(part4)

  4. 然后它转到part4的解析然后它进入登录的解析并再次转到$ statechangeerror函数

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

任何人都可以帮助我.

'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');
    });
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

我在youtube上发布了一个视频,描述并显示错误: youtube:https://www.youtube.com/watch?v = 3Cc2--BkdQ4 & feature = youtu.be

The*_*ris 2

一切看起来都很好。

经过几个小时和许多断点后,我意识到问题不是由任何原因引起的,我的控制器上 $watch()有很多。$watch

这只是一个状态问题,正如您在我的问题中看到的那样,我没有“/”状态,这导致了无限循环,因为:

  1. 当我删除网址的扩展部分时,我有: www.mydomain.com/ ,然后搜索$stateProvider我可用的“状态”但找不到“/”状态,因此它重定向到“登录”状态。
  2. 进入“登录”状态,我检查用户是否==true并拒绝错误。
  3. 然后, $rootScope.$on('$stateChangeError'){..} 执行,我调用 state.go('part4') ,它解析状态 'part4' ,并再次进入状态 'login' 解析,然后再次相同,直到达到 $digest 循环允许的最大迭代次数。

我是怎么解决的

我不知道这是否是最好的方法,但我在 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});
                        }
                    }]
                }
            });
Run Code Online (Sandbox Code Playgroud)