角度 ui.router 无限循环$state或$location变化

Angular ui.router infinite loop on $state or $location change

本文关键字:location 变化 state 角度 router 无限循环 ui      更新时间:2023-09-26

我正处于智慧、神经和一切的尽头,在过去的 4 个小时里,我试图调试并阅读整个互联网上的问题可能是什么。

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

  1. 如果用户过去登录过,我们在 localStorage 中有这方面的数据,然后向他展示列表。 这是离线的
  2. 如果我们连接到互联网,请先显示列表,然后在背景调查中查看他是否仍在登录
  3. 如果不是,请重定向到登录页面。

在主主页视图上,我正在评估上述陈述,首先,如果他有本地存储数据,我会向他展示列表,然后我在线检查并在必要时重定向到登录。

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

一些代码:

这些事件发射器和接收器,我在返回我的状态管理服务时调用它们

//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 上尝试了几种组合,但我在 :) 上惨遭失败。

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

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