Javascript Angular UI-Router $urlRouterProvider .when 不工作时单击 <a ui-sref="...">
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27120308/
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 when I click <a ui-sref="...">
提问by J22Melody
I have .when('/center', '/center/question')in my angular web app.
我.when('/center', '/center/question')在我的角度网络应用程序中有。
When I type '/center'in my browser it will redirect to '/center/question'as I expect but when I click the <a ui-sref="center" href="#/center"></a>, it won't redirect and just stay on the url '/center'.
当我'/center'在浏览器中输入时，它会'/center/question'按照我的预期重定向到，但是当我单击 时<a ui-sref="center" href="#/center"></a>，它不会重定向而只会停留在 url 上'/center'。
There is no error in my console and I don't know why.
我的控制台没有错误，我不知道为什么。
I see one similar issue here Angular UI-Router $urlRouterProvider .when not working anymore.I try the answer but it still don't work for me.
我在这里看到一个类似的问题Angular UI-Router $urlRouterProvider .when 不再工作了。我尝试了答案，但它仍然对我不起作用。
Here is my coffeescript code:
这是我的咖啡脚本代码：
whenConfig = ['$urlRouterProvider', ($urlRouterProvider) ->
# default url config
$urlRouterProvider
.otherwise '/center'
.when '/center', '/center/question'
]
stateConfig = ['$stateProvider', ($stateProvider) ->
# nested url config
capitalize = (s)->
s[0].toUpperCase() + s[1..]
mainConfig = ({
name: name
url: "/#{name}"
templateUrl: "templates/#{name}.html"
controller: "#{capitalize name}Ctrl"
} for name in ['center', 'keywordList', 'keywordConfig', 'log', 'stat'])
centerConfig = ({
name: "center.#{name}"
url: "/#{name}?page"
templateUrl: "templates/center/#{name}.html"
controller: "Center#{capitalize name}Ctrl"
resolve:
thead: (CenterService) ->
CenterService.getThead @self.name
data: (CenterService, $stateParams) ->
CenterService.fetchItems @self.name, $stateParams.page
} for name in ['question', 'answer', 'comment', 'article'])
for singleConfig in mainConfig
$stateProvider.state singleConfig
for childConfig in centerConfig
$stateProvider.state childConfig
]
app.config whenConfig
app.config stateConfig
回答by Radim K?hler
There is a new working plunker(extending the Angular UI-Router $urlRouterProvider .when not working *anymore*), which should be working with the version 0.2.13+
有一个新的工作 plunker （扩展Angular UI-Router $urlRouterProvider .when not working *anymore*），它应该与版本一起使用0.2.13+
Previous solution
以前的解决方案
Until version 0.2.12-we could use $urlRouterProvider.when(), suggested in documenation (small cite):
直到0.2.12-我们可以使用的版本$urlRouterProvider.when()，在文档（小引用）中建议：
How to: Set up a default/index child state
...
if you want the 'parent.index' url to be non-empty, then set up a redirect in your module.config using $urlRouterProvider:
如何：设置默认/索引子状态
...
如果您希望 'parent.index' url 为非空，则使用 $urlRouterProvider 在您的 module.config 中设置重定向：
$urlRouterProvider.when('/home', '/home/index');
So this was solution shown in the Q & Amentioned above:
所以这是上面提到的问答中显示的解决方案：
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');
}];
...
app.config(whenConfig)
Now - we cannot.
现在 - 我们不能。
UI-Router "FIX" in 0.2.13
UI-Router "FIX" in 0.2.13
It is due to "FIX" (which I am simply not sure about), mentioned in the release 0.2.13
这是由于“FIX” （我只是不确定），在0.2.13版本中提到
Bug Fixes
$state:
- ...
- Avoid re-synchronizing from url after .transitionTo (b267ecd3, closes #1573)
错误修复
$state:
- ...
- 避免在.transitionTo( b267ecd3, closes #1573)之后从 url 重新同步
And here is the new code added in the urlRouter.js:
if (lastPushedUrl && $location.url() === lastPushedUrl)
// this line stops the corrent .when to work
return lastPushedUrl = undefined;
lastPushedUrl = undefined;
This piece of code is optimizing/fixing some other issue... but also, turning off the .when()functionality
这段代码正在优化/修复其他一些问题......而且，关闭.when()功能
SOLUTION
解决方案
As already mentioned, this brand new plunkershows the way with version 0.2.13+. We just have to listen to state change, and if the state is "app.list" we can go to its detail with some id...
如前所述，这个全新的plunker展示了 0.2.13+ 版本的方式。我们只需要监听状态变化，如果状态是“app.list”，我们可以用一些 id 去查看它的详细信息......
var onChangeConfig = ['$rootScope', '$state',
function ($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function (event, toState) {
if (toState.name === "app.list") {
event.preventDefault();
$state.go('app.list.detail', {id: 2});
}
});
}]
Check the plunker here
回答by Roi
You can do this in your controller too. I think it is cleaner than listening to state changes.
您也可以在控制器中执行此操作。我认为这比听状态变化更干净。
Example:
例子：
.controller 'YourControllerName', ($scope, $state) ->
$state.go "center.question" if $state.is "center"
