angular 状态更改后激活特定选项卡

Question

我在 AngularJS 中内置了一个网络应用程序，我在其中使用 $state 浏览我的不同 views。我也在使用几个 AngularUI Bootstrap components and styling, among other Bootstrap tabs.

现在我想知道的是，在您单击 link 和新的 view 后，是否有某种方法可以结合 ui-sref 激活特定选项卡已加载。

例如。我在 Dashboard view 那里有一个 link link 直接到 Test view

内的第二个选项卡

仪表板html

<div class="panel">
   <div class="panel-heading">
       <h4">Go to Test view and activate Image tab</h4>
   </div>
   <div class="panel-body">
       <a ui-sref="app.test({id: id})" class="btn btn-info">Test</a>
   </div>
</div

测试html

<tabset class="nav-tabs-alt" justified="true">
    <tab>
        <tab-heading>Information</tab-heading>
        <div class="Content">...</div>
    </tab>
    <tab>
        <tab-heading>Image</tab-heading>
        <div class="Content">...</div>
    </tab>
</tabset>

Answer 1

使用变量来表示选项卡是否使用 active 属性处于活动状态。在我的代码中，我使用了一个名为 imageActive.

的范围变量

 <tabset class="nav-tabs-alt" justified="true">
    <tab active="informationActive">
        <tab-heading>Information</tab-heading>
        <div class="Content">...</div>
    </tab>
    <tab active="imageActive">
        <tab-heading>Image</tab-heading>
        <div class="Content">...</div>
    </tab>
</tabset>

然后单击 link 适当地设置此变量，这将激活第二个选项卡：

 <a class="btn btn-info" ng-click="imageActive= true;">Test</a>

angular 状态更改后激活特定选项卡

Activate specific tab after state change in angular

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap

ui-sref