Angular UI-Router $urlRouterProvider .当我单击 <a ui-sref="..."> 时不起作用 [英] Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">

问题描述

我的 Angular Web 应用中有 .when('/center', '/center/question').

I have .when('/center', '/center/question') in my angular web app.

当我在浏览器中键入 '/center' 时，它会按照我的预期重定向到 '/center/question' 但是当我单击 <一个 ui-sref="center" href="#/center"></a>，它不会重定向，只会停留在 url '/center' 上.

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'.

我的控制台没有错误，我不知道为什么.

There is no error in my console and I don't know why.

我在这里看到一个类似的问题 Angular UI-Router $urlRouterProvider .当不再工作时.我尝试了答案，但它仍然对我不起作用.

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.

这是我的咖啡脚本代码:

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

推荐答案

有一个 新工作plunker (扩展 Angular UI-Router $urlRouterProvider .when not working *anymore*)，它应该适用于版本 0.2.13+

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+

直到版本 0.2.12- 我们可以使用 $urlRouterProvider.when()，文档中建议 (小引用):

Until version 0.2.12- we could use $urlRouterProvider.when(), suggested in documenation (small cite):

...
如果您希望parent.index"网址不为空，请使用 $urlRouterProvider 在您的 module.config 中设置重定向:

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:

 $urlRouterProvider.when('/home', '/home/index');

所以这是 Q &上面提到的一个:

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) 

现在 - 我们不能.

这是由于发布 0.2.13

错误修复
$state:
- ...
- 避免在 .transitionTo 之后从 url 重新同步 (b267ecd3, 关闭#1573)

这里是 新代码添加到 urlRouter.js:

if (lastPushedUrl && $location.url() === lastPushedUrl)
 // this line stops the corrent .when to work
 return lastPushedUrl = undefined;

lastPushedUrl = undefined;

这段代码正在优化/修复一些其他问题 ...但也关闭了 .when() 功能

This piece of code is optimizing/fixing some other issue ... but also, turning off the .when() functionality

如前所述，这个全新的 plunker 展示了 0.2 版的方式.13+.我们只需要监听状态变化，如果状态是app.list"，我们可以通过一些 id 去查看它的细节......

As already mentioned, this brand new plunker shows 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...

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});
    }
  });

}]

在此处查看 plunker

这篇关于Angular UI-Router $urlRouterProvider .当我单击 <a ui-sref="..."> 时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！