javascript - 将事件类添加到子状态下的元素

Question

我在我的 AngularJS 应用程序中使用 ui-router 。我有两个状态，其中之一是子状态。

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

在父状态(专利)中，我有一个表格，其中有一列带有动态按钮，其中一些按钮将用户引导至单独的状态，但需要将用户引导至选项卡内容，即子状态 patents.patent 内 ul 中的第三个。

//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>

在 Controller 中，activePatentItemMenu 设置为 Patent Info，因此第一个 li 项及其内容是任何人首先看到的内容，这是默认值。仅当用户单击表中指定的按钮(标记为续订历史记录。

问题

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

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>

然后在 Controller 中使用 state.params 查找事件的 uib-tabset