$ state或$ location更改时的Angular ui.router无限循环

时间:2014-04-05 22:45:48

标签: javascript angularjs angularjs-scope angular-ui-router eventemitter

我在我的智慧,神经,一切都结束了,在过去的4个小时里,我正在尝试调试和阅读互联网上可能存在的问题。

所以,我正在努力模拟移动应用程序,我的逻辑是这样的:

  1. 如果用户已登录过去,我们在localStorage中有关于该数据的数据,然后向他显示该列表。这是离线
  2. 如果我们连接到互联网,请首先显示列表,然后在后台查看他是否仍然登录
  3. 如果HE ISN' T,请重定向到登录页面。
  4. 在主要主页视图中,我正在评估上述语句,首先我向他显示列表是否有本地存储数据,然后我在线检查并在必要时重定向到登录。

    每当我有两个$ state或$ locations时,循环。就像浏览器几乎冻结一样,幸运的是它的Chrome。我得到了Cannot call method 'insertBefore' of null。从我读到的,一个已知的angular.ui路由器问题,如果使用不好或其他一些神秘的问题。

    一些代码:

    这些事件发射器和接收器,我在StateManagement Services返回时调用

    //Notification Helpers, also exposed, to keep them in the same scope tree.
            function emitNotification (event, data) {
                console.log('Emitting event: ' + event);
                $rootScope.$emit(event, data);
    
            }
    
            function emitListen (event, fn) {
                console.log('Listening for: ' + event);
                $rootScope.$on(event, function (e, data) {
                    fn(data);
                });
    
            }
    

    。 。 。逻辑

    //Update the userData in localStorage and in .value
                                    $auth.storage.set('userData', data);
                                    userData = $auth.storage.get('userData'); //TODO: Redundant, store it directly, is it ok?
    
                                    emitNotification('event:auth-okServer', data);
                                    //return 'ok-server';
    

    ...返回我的服务

    },
                loginSuccess: function(data){
                    emitNotification('event:auth-loginSuccess', data);
                },
                loginFailed: function(data){
                    emitNotification('event:auth-loginFailed', data);
                },
                notify: emitNotification,
                listen: emitListen
    

    这是在我的控制器中:

    .config(function config($stateProvider) {
            $stateProvider
                .state('sidemenu.home', {
                    url: '/home',
                    views: {
                        'topView': {
                            controller: 'HomeCtrl',
                            templateUrl: 'home/home.tpl.html'
                        }
                    }
                })
                .state('sidemenu.home.list', {
                    url: '/list',
                    templateUrl: 'home/home-list.tpl.html',
                    controller: 'ListCtrl'
                })
                .state('sidemenu.home.login', {
                    url: '/login',
                    templateUrl: 'home/home-login.tpl.html',
                    controller: 'LoginCtrl'
                })
                .state('sidemenu.home.register', {
                    url: '/register',
                    templateUrl: 'home/home-register.tpl.html',
                    controller: 'RegisterCtrl'
                })
                .state('sidemenu.home.coach', {
                    url: '/coach',
                    templateUrl: 'home/home-coach.tpl.html',
                    controller: 'CoachCtrl'
                })
                ;
        })
    
        .controller('HomeCtrl', function HomeController($scope, $state, $location, localState) {
    
            /**
             * EVENT EMITTERS
             * @event:auth-loginSuccess - Login has been succesfull, let everybody know.
             * @event:auth-loginFailed  - Login has failed, do something.
             * @event:auth-okServer     - Server challenge ok, user is logged in.
             * @event:auth-okLocal      - Local challenge ok, user appears to be logged in.
             * @event:auth-login        - Go to login
             * @event:general-coach     - Start the coach
             **/
    
    
            /**
             * ===== FIRST LOGIC =====
             **/
    
    
            //We are placing emitters in the same children-parent tree scope, the one from localState, and we're listening to them.
            localState.listen('event:auth-okLocal', function(data) {
                console.log('EVENT: auth-okLocal has been triggered');
                //$state.transitionTo('sidemenu.home.list');
                $location.path('/sidemenu/home/list');
                //First we will be redirected on listpage
            });
    
            localState.listen('event:auth-login', function() {
                console.log('EVENT: auth-login has been triggered');
                $location.path('/sidemenu/home/login');
            });
            //Server check fails, redirect to login
            localState.listen('event:general-coach', function(data) {
                console.log('EVENT: general-coach has been triggered');
                //$state.transitionTo('sidemenu.home.coach');
                $location.path('/sidemenu/home//coach');
            });
    
            //After we have all the listeners in place do the checking & broadcasting.
            localState.check();
    

    我做错了什么?

    我已经调试了发射器,我的check()函数创建了所有的发射器,我在ui.router上尝试了几种组合,我已经失败了:)。

1 个答案:

答案 0 :(得分:2)

我在同一个用例中遇到了同样的问题,这是ui路由器的一个bug,但在转换之前等待它完成状态更改解决了它:

if (webAPIAuth.isLoggedIn()) { $scope.$on('$stateChangeSuccess', function () { $state.go('dashboard'); }); }