使用AngularJS,UI Boostrap和UI路由器时,活动选项卡默认为麻烦

发布时间：2020-12-17 17:49:24 所属栏目：安全来源：网络整理

导读：当使用UI Boostrap tabset以及使用ui-router和ui-router-extras创建的嵌套粘性状态时,我遇到一个问题,即通过URL导航到选项卡的状态将选择第一个选项卡以及正确的选项卡.它应该只激活状态与URL路由匹配的选项卡. 这是tabset的样子： div style="position:rela

当使用UI Boostrap tabset以及使用ui-router和ui-router-extras创建的嵌套粘性状态时,我遇到一个问题,即通过URL导航到选项卡的状态将选择第一个选项卡以及正确的选项卡.它应该只激活状态与URL路由匹配的选项卡.

这是tabset的样子：

<div style="position:relative">
      <tabset>
        <tab heading="Dashboard" ui-sref="LMS.Dashboard" ui-sref-active="active"></tab>
        <tab heading="Modules" ui-sref="LMS.Modules" ui-sref-active="active"></tab>
        <tab heading="Messages" ui-sref="LMS.Messages" ui-sref-active="active"></tab>
        <tab heading="Settings" ui-sref="LMS.Settings" ui-sref-active="active"></tab>
      </tabset>
      <div ui-view="Dashboard" class="tab-content" ng-show="$state.includes('LMS.Dashboard')">
          <h2>Dashboard</h2>
          {{test}}
      </div>
      <div ui-view="Modules" class="tab-content" ng-show="$state.includes('LMS.Modules')">
          <h2>Modules</h2>
      </div>
      <div ui-view="Messages" class="tab-content" ng-show="$state.includes('LMS.Messages')">
          <h2>Messages</h2>
      </div>
      <div ui-view="Settings" class="tab-content" ng-show="$state.includes('LMS.Settings')">
          <h2>Settings</h2>
      </div>
    </div>

我这里有一个傻瓜：

http://plnkr.co/edit/sQB58YKntDwNIUpAdLmT?p=preview

要查看问题,请选择“仪表板”以外的选项卡,然后重新加载“实时视图”框.

另一种方法是在窗口中打开它,切换选项卡,然后重新加载.

解决方法

我有同样的问题.添加active =“false”以禁用默认行为并使用ui-sref-active添加活动类.

<tab ui-sref-active="active" active="false">

编辑

虽然这种方法似乎有效,但它会产生错误,因为false是不可分配的.

编辑2

将ng-init与局部范围变量相结合似乎可以解决问题.

<tab ui-sref-active="active" active="isActive" ng-init="isActive=false">

在您的情况下,为每个选项卡添加活动变量可能更简单.看到这个plunker：
??http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!