Angular ui-router - 如何访问从父模板传递的嵌套命名视图中的参数？

IT技术 javascript angularjs nested angular-ui-router
2021-02-25 11:11:13

嗨，我正在尝试访问控制器“ViewWorklogCrtl”中的参数，同时使用 ui-router 并遇到困难。

基本上，我的父模板包含：

a(ui-sref="instance-ticket.worklog({id:{{ticket.testnum}}})") show

然后在页面下方：

section(ui-view="top-section")

然后在我的 app.js 中，包含客户端路由信息，我有：

 $stateProvider
.state('instance-ticket', {
  url: '/ticket/:instanceID',
  templateUrl: 'partials/instance-ticket',
  controller: 'ViewTicketCrtl'
})
.state('instance-ticket.worklog', {
  views:{
    'top-section':{
      templateUrl:'/partials/ticket.worklog.jade',
      controller: 'ViewWorklogCrtl'
      }
  }
  })

模板加载工作正常，我找不到答案的问题是 - 如何访问通过 ui-sref 链接传递到 ViewWorkLogCtrl 中的“testnum”......有没有更好的方法来这？

非常感谢！！！

2个回答

该instanceID声明为参数，所以我们可以这样访问

.controller('ViewWorklogCrtl',
    [       '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        $scope.instanceID = $stateParams.instanceID;
        ...

所有其他细节都可以在这里找到https://github.com/angular-ui/ui-router/wiki/URL-Routing

并且调用ui-sref应该是这样的

<a ui-sref="instance-ticket.worklog({ instanceID:ticket.testnum })" >..

延长：

如果我们想获得两个参数，1）来自父级的 instanceID 2）来自当前的 testnum，我们必须像这样调整状态定义

.state('instance-ticket', {
  url: '/ticket/:instanceID',      // instanceID
  templateUrl: 'partials/instance-ticket',
  controller: 'ViewTicketCrtl'
})
.state('instance-ticket.worklog', {
  // new param defintion
  url: '/worklog/:testnum',         // testnum
  views:{
    'top-section':{
      templateUrl:'/partials/ticket.worklog.jade',
      controller: 'ViewWorklogCrtl'
      }
  }

而 ui-sref

<a ui-sref="instance-ticket.worklog({ instanceID:1, ticket.testnum:2 })" >..

我们可以像这样访问它：

.controller('ViewWorklogCrtl',
    [       '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        console.log($stateParams.instanceID)
        console.log($stateParams.testnum)
        ...
我认为那会做到的！我想我有两个问题，不完全理解 stateParams 是如何工作的，以及错误地尝试将我的 url 属性放在视图中。您的回答极大地帮助我解决了这两个问题。现在看来我应该能够切换“testnum”（：worklogID）属性，因为实际上会有这些链接的列表。谢谢！
2021-04-17 11:11:13
我已经用新版本的the ui-sref通话更新了答案。我们必须使用与url 中声明的参数名称instanceID相同的参数名称，并且我希望它ticket是某个 ng-repeat 的一个项目……这就是我声明状态 href/references 的方式。票证的 testunm 将被评估并作为 instanceID 传递到$stateParams
2021-04-24 11:11:13
感谢您的答复。不幸的是，获取 instanceID 很清楚，但在我的示例中，我需要在工作日志级别检索的值是“testnum”。当它被点击时： a(ui-sref="instance-ticket.worklog({id:{{ticket.testnum}}})") 它正在将部分加载到命名视图中，我需要检索那个“id”当前填充为 testnum 的值...
2021-04-27 11:11:13
虽然不确定，如果你已经让它工作了......所以我用其他方法扩展了答案。我们可以引入一个新参数testnum。在这里，父状态和子状态都声明了参数……我们可以在一次调用中传递它们……并通过以下方式访问它们$stateParams
2021-05-03 11:11:13

我写了一个自定义指令来解决这个问题。

<a my-sref="{{myStateVar}}">awesome link</a>

你可以从 Github 克隆它：https : //github.com/JensEger/Angular-Directives/tree/master/ui-router-helper

你读懂了我的想法！像一个老板一样！！谢啦！也许不是这个问题的最佳答案，但这正是我一直在寻找的。
2021-05-08 11:11:13
其它你可能感兴趣的问题
上一篇如何在 JavaScript 中将文本转换为二进制代码？ 下一篇弧外标签（饼图）d3.js