Question

我在AngularJS应用中使用ui-router。我有两个州，其中一个是孩子。

.state('patents', {
    url: '/patents',
    component: 'patents'
})
.state('patents.patent', {
    url: '/{patentId}',
    component: 'patent'
})

在父状态（patents）中，我有一个带有动态按钮的列的表，有些将用户引导到单独的状态，但是需要将用户引导到选项卡内容，这是第三个子状态ul内的patents.patent。

//Child state

<div class="view-tabs">
    <ul class="nav view-pills">
        <li ng-click="activeSelectedTab = 0; $ctrl.activePatentItemMenu = 'Patent Info'" ng-class="{active : $ctrl.activePatentItemMenu === 'Patent Info'}">Patent Info</li>
        <li ng-click="activeSelectedTab = 1; $ctrl.activePatentItemMenu = 'Cost Analysis'" ng-class="{active : $ctrl.activePatentItemMenu === 'Cost Analysis'}">Cost Analysis</li>
        <li ng-click="activeSelectedTab = 2; $ctrl.activePatentItemMenu = 'Renewal History'" ng-class="{active : $ctrl.activePatentItemMenu === 'Renewal History'}">Renewal History</li>
    </ul>
</div>

<uib-tabset type="pills" active="activeSelectedTab">
//ALL TAB CONTENT WHICH IS DISPLAY APPROPRIATELY
</uib-tabset>

在控制器中，activePatentItemMenu设置为Patent Info，因此第一个li项及其内容是任何人看到的第一个内容，这是默认设置。仅当用户点击表格中标记为active的指定按钮时，我才需要将li类设置为第3 Renewal History项renewal history。

问题

如果在父状态中单击特定按钮，如何将active状态设置为子状态中的第三个li项？

Answer 1

你应该考虑使用ui-sref和ui-sref-active

<ul class="nav view-pills">
  <li ui-sref-active="active">
    <a ui-sref="patents.patent({patentId: 'Patent Info'})">Patent Info</a>
  </li>
  ...
</ul>

然后在控制器中使用state.params来查找活动的uib-tabset

在子状态

1 个答案: