javascript Angular UI-Router $urlRouterProvider .when 不工作*不再*
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23658846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular UI-Router $urlRouterProvider .when not working *anymore*
提问by mykepwnage
Question:Why won't the .when()in my $urlRouterProviderwork anymore?
问题：为什么.when()在我的$urlRouterProvider作品中不再出现？
I've picked up a fairly robust angular app. The most recent issue I've been trying to fix with it has been the 'user credentials lost on page refresh' issue.
我选择了一个相当强大的 angular 应用程序。我一直在尝试解决的最新问题是“页面刷新时用户凭据丢失”问题。
The project's auth service didn't make much sense when I picked it up and after digging around I learned it was put together from a few random pages of code. It also wasn't working completely, so I looked into the different sources and decided to fully implement one of them (angular-client-side-auth)
当我拿起它时，该项目的身份验证服务并没有多大意义，经过深入研究后，我了解到它是从几页随机代码中组合在一起的。它也没有完全工作，所以我查看了不同的来源并决定完全实现其中之一（angular-client-side-auth）
Now, the auth service/controller I've implemented are basically the same as what's in angular-client-side-auth, however the site I'm working uses token based authentication. The token functionality was bascially in place already, so I didn't have any trouble getting it to work.
现在，我实现的身份验证服务/控制器与angular-client-side-auth中的内容基本相同，但是我工作的站点使用基于令牌的身份验证。令牌功能已经基本到位，所以我在让它工作时没有任何问题。
At this point, I've got the user staying logged in on refresh, routes are working along with their authentication (was previously using bulky code to disable elements in view) However, now the $urlRouterProvider .when()s are broken. They were working perfectly fine before, so I know something I've done is to fault - but I can't simply undo what I've implemented!
在这一点上，我让用户在刷新时保持登录状态，路由正在与他们的身份验证一起工作（以前使用庞大的代码来禁用视图中的元素）但是，现在$urlRouterProvider .when()s 已损坏。他们以前工作得很好，所以我知道我所做的事情是错误的 - 但我不能简单地撤销我已经实施的东西！
So this is $urlRouterProvider code I'm using. Worth mentioning is that I've included/required the .when(), whereas angular-client-side-authdoesn't seem to use them. I expected they could have been implemented with that code, however maybe there is something in it that voids the functionality of .when()? I didn't think so. Might as well also clarify that I'm not using the .ruleor $httpProvider.interceptorsthere either yet. I've tried using the site with these implemented, but they didn't seem to make a difference.
所以这是我正在使用的 $urlRouterProvider 代码。值得一提的是，我已经包含/需要.when()，而angular-client-side-auth似乎没有使用它们。我希望它们可以用该代码实现，但是也许其中有一些东西使.when()? 我不这么认为。不妨也澄清一下，我还没有使用.rule或$httpProvider.interceptors那里。我试过在网站上使用这些实现，但它们似乎没有什么区别。
$urlRouterProvider
.when('/myState/group', ['$state', 'myService', function ($state, myService) {
$state.go('app.myState.group.id', {id: myService.Params.id});
}])
.otherwise('/');
So basically, if the user or site directs the user to /myState/group, they should actually end up at url for state app.myState.group.idright? They don't though, and I can't figure out why. There isn't much out there regarding issues using urlRouterProvider.
所以基本上，如果用户或站点将用户引导到/myState/group，他们实际上应该以 url 结束状态，app.myState.group.id对吗？但他们没有，我不知道为什么。关于使用 urlRouterProvider 的问题并不多。
What doeshappen? Well the view for /myState/grouploads fine, and within it's <ui-view>is a generated list of the id's. You can click on an ID, which calls a function which sets the ID and then performs $state.go('app.myState.group.id', {id: group.id, std: $scope.std1});That state of course replaces the 'generated list' that the user clicked.
什么没有发生？好吧，/myState/group加载视图很好，其中包含<ui-view>一个生成的id's列表。您可以单击一个 ID，它会调用一个函数来设置 ID，然后执行$state.go('app.myState.group.id', {id: group.id, std: $scope.std1});该状态当然会替换用户单击的“生成列表”。
Now, for the .state()'s...
现在，对于.state()...
.state('app.myState', {
abstract: true,
url: '/myState',
templateUrl: 'views/myState.html',
data: {
access: access.user
},
controller: 'MyCtrl',
resolve: {
// bunch of stuff here, I'll include it if it's relevant
},
redirectMap: {
'409': 'app.error'
}
})
.state('app.myState.group', {
url: '/group',
templateUrl: 'views/myState.group.html',
data: {
access: access.user
}
})
.state('app.myState.group.id', {
url: '/:id',
templateUrl: 'views/myState.group.id.html',
data: {
access: access.user
},
resolve: {
'': function (myService) {
myService.stuff.get(false, false, 7, 0).then(function (data) {
});
}
},
controller: 'MygroupidCtrl'
})
Finally, index.html
最后， index.html
<li ng-class="{active: $state.includes('app.myState')}">
<a ui-sref="app.myState.group">My State</a>
</li>
<li ng-class="{active: $state.includes('app.myState')}">
<a ui-sref="app.myState.group">My State</a>
</li>
Somehow I feel like there's a better way to structure this. From what I can tell, the app.myState.groupis never actually needed by itself, it's simply part of the nesting.
不知何故，我觉得有一种更好的方法来构建它。据我所知，app.myState.group实际上从来不需要它本身，它只是嵌套的一部分。
I've attempted to simply change the ui-srefto ="app.myState.group.id". When that didn't work I also changed $state.includes('app.myState')}to $state.includes('app.myState.group')}. Nope. Is this viable? I know I'd have to pass the ID in somehow, but it doesn't even seem to be directing.
我试图简单地ui-sref将="app.myState.group.id". 如果没有工作，我也改$state.includes('app.myState')}到$state.includes('app.myState.group')}。不。这是可行的吗？我知道我必须以某种方式传递 ID，但它甚至似乎都不是导演。
Ideally, I'd like to limit the amount of unnecessary states (and controllers.. and everything). Since the user is suppose to be taken directly to /myState/group/idwhen they click the link, I feel like that should just happen. Not this linking to another state and then a redirect!
理想情况下，我想限制不必要的状态（和控制器......以及一切）的数量。由于假设用户/myState/group/id在单击链接时会被直接带到，我觉得这应该发生。这不是链接到另一个状态然后重定向！
That said, I care more about simply getting this to work at the moment, and I can worry about cleaning things up later.
也就是说，我现在更关心只是让它工作，我可以担心以后清理事情。
EDIT
编辑
So while I was writing the question I was getting some more ideas of things to try. One of them actually worked!
所以当我在写这个问题的时候，我得到了更多尝试的想法。其中之一确实有效！
.state('app.myState.group', {
url: '/group',
templateUrl: 'views/myState.group.html',
data: {
access: access.user
},
onEnter: ['$state', '$timeout', 'myService', function ($state, $timeout, myService) {
$timeout(function () {
$state.go('app.myState.group.id', {id: myService.Params.id})
}, 1000);
}]
I like it, though I still wonder if there are other ways of doing this. I'm also still curious why the $urlRouterProvider stopped working!
我喜欢它，但我仍然想知道是否还有其他方法可以做到这一点。我也很好奇为什么 $urlRouterProvider 停止工作了！
回答by Radim K?hler
EDIT: version 0.2.13 - breaking change
编辑：版本 0.2.13 - 重大更改
The original post was working with the UI-Router 0.2.12-. A fix in 0.2.13 disables this solution. Please follow the workaround here:
原始帖子使用 UI-Router 0.2.12-。0.2.13 中的修复禁用了此解决方案。请按照此处的解决方法操作：
Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">
Angular UI-Router $urlRouterProvider .当我单击 <a ui-sref="..."> 时不起作用
ORIGINAL:
原来的：
There is one issue, I found, causing similar issue. There is a working examplewith full code
Firstly, let's have two functions to configure
首先，让我们配置两个函数
$urlRouterProviderand$stateProvider
$urlRouterProvider和$stateProvider
The snippet of these defintions:
这些定义的片段：
// when config for $urlRouterProvider
var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {
$urlRouterProvider
.when('/app/list', ['$state', 'myService', function ($state, myService) {
$state.go('app.list.detail', {id: myService.Params.id});
}])
.otherwise('/app');
}];
// state config for $stateProvider
var stateConfig = ['$stateProvider', function($stateProvider) {
$stateProvider
.state('app', {
url: '/app',
...
}];
Having this, the reported behaviour will hapen if we will call them like this:
有了这个，如果我们这样称呼它们，就会发生报告的行为：
angular.module('MyApp', [
'ui.router'
])
// I. firstly the states
.config(stateConfig)
// II. then the WHEN
.config(whenConfig)
The above call will not work. When will not trigger the detail state when list is visited.
上面的调用将不起作用。当访问列表时不会触发详细状态。
But this will work as expected:
但这将按预期工作：
angular.module('MyApp', [
'ui.router'
])
// I. firstly WHEN
.config(whenConfig)
// II. only then call state config
.config(stateConfig)
Check it here. See the app.jsfile...
在这里检查。看app.js文件...
SUMMARY: We simply have to firstly configure the $urlRouterProvider. Only then we can start to fill in our states via $stateProvider. This approach will lead to expected behaviour.
总结：我们只需要首先配置$urlRouterProvider. 只有这样我们才能开始通过$stateProvider. 这种方法将导致预期的行为。
