当前位置: 首页 > 面试题库 >

角度UI路由器-如何访问从父模板传递的嵌套命名视图中的参数?

宫俊远
2023-03-14
问题内容

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

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

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以及在ViewWorkLogCtrl中传递的“
testnum” …是否有更好的方法这个?

非常感谢!!!


问题答案:

instanceID声明为参数,因此我们可以像这样访问它

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

所有其他详细信息可以在这里找到https://html" target="_blank">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)
        ...


 类似资料:
  • 问题内容: 我正在尝试创建文件查看器,并且想嵌套子目录。我正在使用ui-router,我希望每个子目录都有其自己的URL和状态。 说我有以下结构: 我希望我的路线是: 我想递归地执行此操作,而不是为每个子目录创建一个新状态 问题答案: 我建议用 一种状态 和 一种参数 - 来做。因为应该尽快定义所有状态,以支持url路由。所有这些唯一的folderPath可能不同,也可能是动态的-在运行时中,在应

  • 问题内容: 我有如下配置: 玉器主锉 因此,模块将填充到占位符中。但是问题是,我在模板中还有2个命名视图。模板如下所示: leftSidePaneModule.html 如何使模块和在被填充到上述占位? 我试过了, 尝试次数:2 两者都不起作用。 你怎么做呢? 谢谢! 问题答案: 解决方案可在此处找到:视图名称-相对名称与绝对名称。引用: 在幕后,每个视图都被分配一个遵循的方案的绝对名称,其中指令

  • 我的配置如下所示: 主玉锉 因此,模块被填充到ui-view='leftSidePaneModule占位符中。但问题是,我在模板中有2个命名的视图。 leftSidePaneModule。html 如何制作模块 我试过了, 尝试: 2 两者都不起作用。 你是怎么做到的? 谢谢

  • 问题内容: 我有这样的结构: 我希望能够在如下所示的主要状态下定义模板,而不必在子状态下进行管理。 我希望命名的ui视图不是其子状态,并由该状态的views对象而不是子状态的templateUrl字段填充。我怎样才能做到这一点? 问题答案: 我们可以在 一种* 状态下使用 更多 视图,请参阅: * 多个命名视图 该定义只需要使用绝对命名即可: 如此处详细说明: 视图名称-相对名称与绝对名称 在幕后

  • 问题内容: 我想用以下结构构建一个站点header-view,main-view,footer- view。因此,我定义了一个包含页眉和页脚的根路由。root的子代将是我的全部站点。在这些站点中,我将拥有更多的嵌套视图。 在下面的代码中,它确实显示了页眉,但未显示页脚和主视图。一旦删除父级继承,它将显示主视图,但不显示页眉和页脚。 的HTML JS 问题答案: 有一个与正在工作的矮人有关的链接。

  • 问题内容: 是否可以在有条件的ui路由器中创建嵌套视图?条件已分配给用户角色。 例如,我有两种类型的用户: admin 和 user 。如果用户正在打开设置页面,则ui路由器仅添加分配给他的角色的该视图。 这是我的配置代码的示例 问题答案: 该视图将为每个用户(管理员或匿名)注入。但是我们可以管理哪个视图。最好的办法是使用 。 根据此问答: $ locationChangeSuccess和$sta