Angular ui-router - 如何访问从父模板传递的嵌套命名视图中的参数? [英] Angular ui-router - how to access parameters in nested, named view, passed from the parent template?

问题描述

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

Hi I am trying to access a parameter in the controller "ViewWorklogCrtl" while using ui-router and running into difficulty.

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

Basically, my parent template contains:

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

然后在页面下方:

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

然后在我的 app.js 中，包含简短的客户端路由信息:

Then in my app.js, containing client-side routing info in short I have:

 $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"...是否有更好的方法?

The template loading is working correctly, the issue and question I can't find an answer to is - how to access "testnum" being passed through the ui-sref link, to and within the ViewWorkLogCtrl... Is there a better approach to this?

非常感谢！！！

推荐答案

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

The instanceID is declared as an parameter, so we can access it like this

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

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

All the other details could be found here 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，我们必须像这样调整状态定义

In case that we would like to get two parameters, 1) instanceID from the parent 2) testnum from the current, we have to adjust the state defintion like this

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

这篇关于Angular ui-router - 如何访问从父模板传递的嵌套命名视图中的参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！