角度 ui.router 无限循环$state或$location变化
Angular ui.router infinite loop on $state or $location change
我正处于智慧、神经和一切的尽头,在过去的 4 个小时里,我试图调试并阅读整个互联网上的问题可能是什么。
所以,我正在努力模拟一个移动应用程序,我的逻辑是这样的:
- 如果用户过去登录过,我们在 localStorage 中有这方面的数据,然后向他展示列表。 这是离线的
- 如果我们连接到互联网,请先显示列表,然后在背景调查中查看他是否仍在登录
- 如果不是,请重定向到登录页面。
在主主页视图上,我正在评估上述陈述,首先,如果他有本地存储数据,我会向他展示列表,然后我在线检查并在必要时重定向到登录。
每当我有两个$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');
});
}
相关文章:
- 正在使用$location.path(.)路由ng视图
- 单击页面上的链接后高度发生变化
- window.location替换并传递URL历史记录条目中的变量
- 可以<脚本类型=“;text/javascript”>window.location=“/"</
- location.reload(true)崩溃浏览器选项卡
- React redux初始化功能,无论状态变化如何
- window.location使用jquery mobile实现chrome跳转
- 角度ng变化或ng点击选择can'不起作用
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- JS幻灯片与CSS背景颜色变化
- Windows.Open 在 window.Location 工作时不起作用
- 重新加载页面时Javascript变量发生变化
- 如何获得Bootstrap Datepicker的年和月,因为它在变化
- 如何用jquery替换字符串中可能变化的字符
- 检测数据的变化
- 如何检测和打印变化变量LESS
- 当文本不断变化时,如何避免在按钮内移动文本
- 当数据库中的某些内容发生变化时调用HTTP方法Meteor.js
- 如果AngularJS $location.path()发生了变化,就做点什么
- 角度 ui.router 无限循环$state或$location变化