Angular UI-Router $urlRouterProvider .when 不工作*不再* [英] Angular UI-Router $urlRouterProvider .when not working *anymore*
问题描述
问题: 为什么我的 $urlRouterProvider 中的 .when() 不再起作用?
Question: Why won't the .when() in my $urlRouterProvider work anymore?
我选择了一个相当强大的 angular 应用程序.我一直在尝试解决的最新问题是页面刷新时用户凭据丢失"问题.
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-client-side-auth)
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.
此时，我让用户保持登录刷新，路由正在与他们的身份验证一起工作(以前使用庞大的代码来禁用视图中的元素)但是，现在 $urlRouterProvider .when() 坏了.他们之前工作得很好，所以我知道我所做的事情是错误的 - 但我不能简单地撤消我已经实施的事情！
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()，而 angular-client-side-auth 似乎没有使用它们.我希望它们可以用该代码实现，但是也许其中有一些东西使 .when() 的功能无效?我不这么认为.也可以澄清一下，我还没有在那里使用 .rule 或 $httpProvider.interceptors .我已经尝试使用实现了这些的网站，但它们似乎没有什么不同.
So this is $urlRouterProvider code I'm using. Worth mentioning is that I've included/required the .when(), whereas angular-client-side-auth doesn'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 .rule or $httpProvider.interceptors there either yet. I've tried using the site with these implemented, but they didn't seem to make a difference.
$urlRouterProvider
.when('/myState/group', ['$state', 'myService', function ($state, myService) {
$state.go('app.myState.group.id', {id: myService.Params.id});
}])
.otherwise('/');
所以基本上，如果用户或站点将用户定向到 /myState/group，他们实际上应该最终到达状态 app.myState.group.id 的 url对?他们没有，我不明白为什么.关于使用 urlRouterProvider 的问题并不多.
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.id right? They don't though, and I can't figure out why. There isn't much out there regarding issues using urlRouterProvider.
发生了什么?好吧，/myState/group 的视图加载得很好，其中 <ui-view> 是 id 的生成列表.你可以点击一个 ID，它会调用一个设置 ID 的函数，然后执行 $state.go('app.myState.group.id', {id: group.id, std: $scope.std1}); 该状态当然会替换用户单击的生成列表".
What does happen? Well the view for /myState/group loads 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.
现在，对于 .state() 的...
Now, for the .state()'s...
.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'
})
最后，index.html
不知何故，我觉得有更好的方法来构建它.据我所知，app.myState.group 从来没有实际需要本身，它只是嵌套的一部分.
Somehow I feel like there's a better way to structure this. From what I can tell, the app.myState.group is never actually needed by itself, it's simply part of the nesting.
我试图简单地将 ui-sref 更改为 ="app.myState.group.id".当那不起作用时，我还将 $state.includes('app.myState')} 更改为 $state.includes('app.myState.group')}.不.这是可行的吗?我知道我必须以某种方式传递 ID，但它甚至似乎都不是导演.
I've attempted to simply change the ui-sref to ="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.
理想情况下，我想限制不必要的状态(和控制器......以及一切)的数量.由于假设用户在单击链接时会被直接带到 /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/id when they click the link, I feel like that should just happen. Not this linking to another state and then a redirect!
也就是说，我现在更关心的是让这个功能正常工作，我可以担心以后清理事情.
That said, I care more about simply getting this to work at the moment, and I can worry about cleaning things up later.
编辑
所以在我写这个问题的时候，我得到了更多可以尝试的想法.其中之一确实有效！
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);
}]
我喜欢它，但我仍然想知道是否还有其他方法可以做到这一点.我也很好奇为什么 $urlRouterProvider 停止工作了！
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!
推荐答案
version 0.2.13 - 重大变更
version 0.2.13 - breaking change
原来的帖子是使用 UI-Router 0.2.12-.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:
原文:
我发现有一个问题导致了类似的问题.有一个工作示例，包含完整代码
There is one issue, I found, causing similar issue. There is a working example with full code
首先我们来配置两个函数
Firstly, let's have two functions to configure
$urlRouterProvider和$stateProvider
这些定义的片段:
// 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.
但这会按预期工作:
angular.module('MyApp', [
'ui.router'
])
// I. firstly WHEN
.config(whenConfig)
// II. only then call state config
.config(stateConfig)
在此处查看.查看 app.js 文件...
Check it here. See the app.js file...
总结:我们只需首先配置$urlRouterProvider.只有这样我们才能开始通过 $stateProvider 填充我们的状态.这种方法将导致预期的行为.
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.
这篇关于Angular UI-Router $urlRouterProvider .when 不工作*不再*的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
