Angular UI-Router $urlRouterProvider .当我单击 <a ui-sref="..."> 时不起作用

Posted 2023-03-03

【中文标题】Angular UI-Router $urlRouterProvider .当我单击 <a ui-sref="..."> 时不起作用

【英文标题】：Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">

【发布时间】：2015-01-23 01:52:59

【问题描述】：

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

当我在浏览器中输入'/center' 时，它会按照我的预期重定向到'/center/question'，但是当我点击<a ui-sref="center" href="#/center"></a> 时，它不会重定向，而是停留在网址'/center' 上。

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

我在这里看到了一个类似的问题Angular UI-Router $urlRouterProvider .when not working anymore。我尝试了答案，但它仍然对我不起作用。

这是我的咖啡脚本代码：

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 nameCtrl"
   for name in ['center', 'keywordList', 'keywordConfig', 'log', 'stat'])

  centerConfig = (
    name: "center.#name"
    url: "/#name?page"
    templateUrl: "templates/center/#name.html"
    controller: "Center#capitalize nameCtrl"
  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

【问题讨论】：

不需要在你的 标签中添加 href=""，这项工作将由 ui-router 处理...所以替换这一行 到 并检查

@Asik 我不加href=""，这个是ui-router加的

哦好的抱歉！我误会了

尝试在浏览器的 ui-router 的line 3224 处添加断点，并检查转换承诺是否吞下了语法错误或其他什么。我已经发生过几次了。

【参考方案1】：

有一个new working plunker（扩展Angular UI-Router $urlRouterProvider .when not working *anymore*），它应该适用于版本0.2.13+

以前的解决方案

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

How to: Set up a default/index child state

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

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

所以这是上面提到的Q & A 中显示的解决方案：

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 中的 UI 路由器“FIX”

这是由于“FIX”（我只是不确定），在发布 0.2.13

中提到

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

这里是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;

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

解决方案

如前所述，这个全新的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);
    
  );

]

查看plunker here

【讨论】：

您也应该知道，因为我不确定，如果 0.2.13 的这种“新”行为是否正确，我发布了一个问题github.com/angular-ui/ui-router/issues/1584。可能是这种解决方法将是方式，但可能不是......我们会看到;）祝你好运与真棒 UI-Router ;）

明白了！其实我也希望这可以更优雅，我订阅了这个问题，谢谢:)

UI-Router 开发者在这里。 J22Melody，您的用例是否本质上想要“抽象状态的默认子状态”？ @RadimKöhler 我正在考虑您的问题。我可能会将该提交回滚到 0.2.x（因为这是人们目前所期望的），但是当我们有更好的基于状态的重定向解决方案时，会在以后的版本中重新引入它。

@ChrisT 是的，我想要“默认子状态”

【参考方案2】：

您也可以在控制器中执行此操作。我认为这比听状态变化更干净。

例子：

.controller 'YourControllerName', ($scope, $state) ->
    $state.go "center.question" if $state.is "center"

【讨论】：

我是唯一一个认为 CoffeeScript 完全不可读的人吗？

这只会在控制器首次初始化时触发一次，但不会再次触发，因此无法解决问题。使用此解决方案，访问centre 将重定向到center.question，但单击ui-sref of center 将导航到center，而无需再次触发上述代码，从而使您处于空白视图。