为什么这个角度UI路由器code会引起消化$一个无限循环？ [英] Why does this Angular ui router code cause an infinite loop in $digest?
问题描述
我煮code下跌了，我可以。关于嵌套状态和事件处理/广播的东西也能引起无限循环。在Chrome中我可以暂停一下，看看它是否在角的 $摘要函数永远循环。知道为什么吗？它是在我的例子code错误，或
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用='bugapp'NG控制器='BugAppCtrl'＆GT;
＆LT; HEAD＆GT;
＆LT;脚本的src =// code.jquery.com / jQuery的-1.10.1.min.js'＆GT;＆LT; / SCRIPT＆GT; ＆LT;！ - 角1.2.11 - ＆GT;
＆LT;脚本的src ='// ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js'></script> ＆LT;！ - UI路由器0.2.8 - ＆GT;
＆LT;脚本的src ='// cdn.jsdelivr.net/angular.ui-router/0.2.8/angular-ui-router.js'></script> ＆LT;脚本＆GT;
angular.module（'bugapp'，['ui.router']）
.RUN（函数（$ rootScope，$状态，$ stateParams）{
$ rootScope $状态= $状态。
$ rootScope $ stateParams = $ stateParams。
}）
的.config（函数（$ locationProvider，$ stateProvider，$ urlRouterProvider）{
$ locationProvider.html5Mode（假）; $ stateProvider
.STATE（根，{
摘要：真实，
网址：？/参数servletContext asUser
模板：'＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;' //？
}）
.STATE（root.home，{
摘要：真实，
网址：/家，
模板：＆LT; DIV NG-IF ='hasData（）UI-视图＆gt;＆LT; / DIV＆gt;中 }）
.STATE（root.home.profile，{
网址：/情景模式
模板：'＆LT; DIV＆GT;凡是＆LT; / DIV＆GT;'
}） }）
.controller（'BugAppCtrl'，函数（$范围，$状态，$ stateParams，$日志$位置）{
$ log.log（'BugAppCtrl：构造函数'）; $ scope.hasData =功能（）{
VAR解析度= !! $ scope.foo;
// $ log.log（hasData叫，returing+资源+foo是+ $ scope.foo）;
返回水库;
}; $范围。在$（'$ stateChangeSuccess'，函数（）{
$ log.log（状态（到！+ $ state.current.name +））;
$ scope.foo =垃圾;
$ $范围广播（resetfoo）;
}）; $ state.go（'root.home.profile'）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我怀疑这是在UI路由器的一个bug，有两个原因：
- 我想你的code，然后试图降级UI的版本
路由器0.2.7。当我用0.2.7，它的工作。 -
即使您继续使用路由器的用户界面版本0.2.8，如果执行到$位置，而不是$状态的状态变化，它的工作原理。下面是使用$位置而不是$ state.go调用的例子：
$ location.path（'/参数servletContext /家庭/个人资料'）;
虽然我使用和推荐的UI路由器（没有嵌套视图不能做的），如果你在你想要做的任何形式的拦截或重定向的未来找到当用户试图访问某些网页，我建议使用$ location.path而不是$状态中，我描述的原因在一篇博客文章
修改：我还没有与参数尝试过，但只是试图用code你贴（我创建了一个第二控制器，它分配给您的root.home.profile状态），和它的作品。从UI路由器说明这里。但基本上，如果你你会与UI路由器以同样的方式设置您的网址在你的状态定义：
URL：/型材/：富，
然后在$ location.path调用添加参数的路径：
$ location.path（'/参数servletContext /家庭/型材/ 12'）;
，您可以在控制器从
访问12 $ stateParams.foo
I've boiled the code down as much as I can. Something about nested states and the event handling/broadcasting is causing an infinite loop. In Chrome I can pause it and see that it is looping forever in Angular's $digest function. Any idea why? Is it a bug in my example code, or a bug in Angular, or the UI Router?
<!doctype html>
<html ng-app='bugapp' ng-controller='BugAppCtrl'>
<head>
<script src='//code.jquery.com/jquery-1.10.1.min.js'></script>
<!-- Angular 1.2.11 -->
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js'></script>
<!-- UI router 0.2.8 -->
<script src='//cdn.jsdelivr.net/angular.ui-router/0.2.8/angular-ui-router.js'></script>
<script>
angular.module('bugapp', ['ui.router'])
.run(function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
})
.config(function ($locationProvider, $stateProvider, $urlRouterProvider) {
$locationProvider.html5Mode(false);
$stateProvider
.state("root", {
abstract: true,
url: "/servletContext?asUser",
template: '<div ui-view></div>' // ???
})
.state("root.home", {
abstract: true,
url: "/home",
template: "<div ng-if='hasData()' ui-view ></div>"
})
.state("root.home.profile", {
url: "/profile",
template: '<div>whatever</div>'
})
})
.controller('BugAppCtrl', function ($scope, $state, $stateParams, $log, $location) {
$log.log('BugAppCtrl: constructor');
$scope.hasData = function() {
var res = !!$scope.foo;
// $log.log("hasData called, returing " + res + " foo is " + $scope.foo);
return res;
};
$scope.$on('$stateChangeSuccess', function () {
$log.log("State changed! (to " + $state.current.name + ")");
$scope.foo = 'junk';
$scope.$broadcast("resetfoo");
});
$state.go('root.home.profile');
});
</script>
</head>
<body>
<div ui-view></div>
</body>
</html>
I suspect this is a bug in the UI Router, for two reasons:
- I tried your code and then tried downgrading the version of UI Router to 0.2.7. When I used 0.2.7, it worked.
Even if you keep using version 0.2.8 of UI Router, if you perform the state change through $location instead of $state, it works. Here's an example of using $location instead of the $state.go call:
$location.path('/servletContext/home/profile');
Although I use and recommend UI Router (can't do without nested views), if you find in the future that you want to do any sort of intercepting or redirecting when the user tries to go to certain pages, I recommend using $location.path instead of $state, for reasons I described in a blog post
Edit: I haven't tried with parameters before but just tried with the code you posted (I created a 2nd controller and assigned it to your 'root.home.profile' state), and it works. Instructions from UI Router are here. But basically if you set your URL in your state definition the same way you would with UI Router:
url: "/profile/:foo",
then in your $location.path call add the parameter in the path:
$location.path('/servletContext/home/profile/12');
and you can access the 12 in the controller from
$stateParams.foo
这篇关于为什么这个角度UI路由器code会引起消化$一个无限循环？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
