javascript-状态更改角度后激活特定选项卡

我有一个用AngularJS内置的Web应用程序,在其中我使用$state来浏览不同的视图.我还使用了多个AngularUI Bootstrap组件和样式,以及其他Bootstrap tabs.

现在我想知道的是,单击链接并加载新视图后,是否可以通过某种方式与ui-sref组合来激活特定选项卡.

例如
我在“仪表板”视图上,那里有一个链接直接链接到“测试”视图内的第二个选项卡

仪表板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>

解决方法:

使用变量来表示选项卡是否通过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>

然后使一个链接单击适当设置此变量,这将激活第二个选项卡：

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

标签：angularjs,ui-sref,twitter-bootstrap,angular-ui-bootstrap,javascript
来源： https://codeday.me/bug/20191119/2033200.html