javascript - 使用 ui-router 的多个参数

Question

我在使用ui-router传递多个参数时遇到一些奇怪的问题

我的 ui-sref 看起来像这样:

ui-sref="app.bins.view({binId:{{gridDisplayItem.id}},allowUpload:'{{gridDisplayItem.user_upload}}'})"

如果我检查该元素，我会看到类似以下内容:

<a ui-sref="app.bins.view({binId:3,allowUpload:'No'})" href="#/app/bins/view/3">
  <i class="fa fa-folder-open" style="font-size:18px;color:green"></i>
</a>

因此正在传递正确的值。

当我导航到 app.bins.view 并执行 console.log($stateParams.binId); 时，它显示 3 .

如果我执行 console.log($stateParams.allowUpload); 我会得到 undefined。

如果我执行 console.log($stateParams); 我会得到 Object {binId: "3"}

根据文档，我这样做是正确的:https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

我在这里做错了什么？

Answer 1

最重要的是，ui-router 文档 ( https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service ) 中需要理解的信息如下

$stateProvider.state('contacts.detail', {
   url: '/contacts/:contactId',   
   controller: function($stateParams){
      $stateParams.contactId  //*** Exists! ***//
   }
}).state('contacts.detail.subitem', {
   url: '/item/:itemId', 
   controller: function($stateParams){
      $stateParams.contactId //*** Watch Out! DOESN'T EXIST!! ***//
      $stateParams.itemId //*** Exists! ***//  
   }
})

您必须确保在提供程序的配置中声明您的参数。

如果您的“allowUpload”参数的目的如我所想，那么您应该没有理由不能在 href 上使用 ng-click 事件来在 Controller 中调用一个函数，然后使用 $state。 go() 方法来管理 View 更改。只需将变量传递给 Controller ​​即可。