重定向到一个模板时解决后（）角UI路由器问题会抛出错误 [英] Angular UI Router issue when redirecting to a template after resolve() throws error
问题描述
所以，我花了很长的时间来了解这个问题，并获得一个 MCVE 。这里是这样的：我想用户当他不验证的登录页面（这是很基本的）重定向。这里是code：
So It took me a very long time to understand this issue and get to a mcve. Here is the case : I'm trying to redirect a user to a login page when he's not authenticated (this is very basic). Here is the code :
HTML
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<div ui-view></div>
<script id="login.html" type="text/ng-template">
l
</script>
<script id="welcome.html" type="text/ng-template">
w
</script>
</body>
</html>
JS：
angular.module('starter', ['ui.router'])
.run(["$rootScope", "$state", function($rootScope, $state) {
$rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
if (error === "nope") {
$state.go("login");
}
});
}])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/welcome');
$stateProvider
.state('welcome', {
url: '/welcome',
templateUrl: 'welcome.html',
resolve: {
"auth": ["$q", function($q) {
return $q.reject("nope");
}]
}
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
});
视图/ login.html的仅包含VL看到它显示在屏幕上。因此，当上述code为跑，输出还是不错的，但是看看Chrome的控制台：
The "views/login.html" contains just "vl" to see it showing on the screen. So, when the above code is ran, the output is good, but look at the Chrome console :
现在，它的疯狂的一部分，如果修改了JS和替换
Now, the crazy part of it, is if you modify the JS and replace
templateUrl: 'views/login.html'
只需在登录状态
templateUrl: 'login.html'
使用在HTML中定义的NG-模板
，一切都很好！这么好，我想用一个文件作为模板必须引发一些观察家或任何...哦，不，我只是出出主意。
using the ng-template defined in the html, ALL IS GOOD ! So well, I guess using a file as template must trigger some watcher or whatever... Well no, I'm just out of ideas.
提前感谢您的帮助！
这里有两件事情，可以帮助：
here are two things that could help :
- 有到位UI路由器 使用ngRoute时没有错误
- 有没有错误，如果用1.2.25 替换角版本
- There is no error when using ngRoute in place of UI Router
- There is no error if replacing Angular version with the 1.2.25
所以，我认为它与UI路由器和角1.3的bug。但不知道在所有做些什么来解决这个问题。
So I think it's a bug with UI Router and Angular 1.3. But don't know at all what to do to solve it.
推荐答案
您需要调用事件。preventDefault（）你打电话之前 $ state.go（）。
You need to call event.preventDefault() before you call $state.go().
在这里看到： http://plnkr.co/edit/eUosIpdN7adJFxfDo3kV?p= preVIEW
<击>这个错误是发生，因为你已经确定的主要的原因，是模板网址查看/ login.html的不exsit。你说，当你从查看/ login.html的更改模板网址'的login.html'一切工作，因为该模板确实存在这是有道理的。
The main reason this error is occuring, as you have already identified, is that the template url 'views/login.html' doesn't exsit. You said that when you changed the template url from 'views/login.html' to 'login.html' everything worked, and this makes sense because that template does exist.
您所看到的无限消化错误的原因是，每次尝试访问欢迎状态 AUTH 解析抛出来触发 $ stateChangeError 事件像你期望的那样太错误。一切都很好，直到点时，它会尝试转到登录状态。试图过渡到登录，因为模板网址状态失败，而这种故障是造成你的查看/ login.html的不存在，否则重定向给您带来回欢迎状态。您可以在这一点上看到，在欢迎前来回国家将重新启动整个循环，并导致无限循环消化
The reason you are seeing the infinite digest error is that each time you try to access the welcome state the auth resolver is throwing an error which triggers the $stateChangeError event like you would expect it too. Everything is fine up until the point when it tries to go to the login state. Attempting to transition to the login state fails because the template url 'views/login.html' doesn't exist, and this failure is causing your otherwise redirect to bring you back to the welcome state. You can see at this point that arriving back at the welcome state will restart the whole cycle and cause the infinite digest loop.
您只需确保您的模板网址是否正确应为prevent这种情况发生，因为你已经发现了。
Simply ensuring that your template urls are correct should prevent this from happening, as you have already discovered.
这篇关于重定向到一个模板时解决后（）角UI路由器问题会抛出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
