Angular 引导选项卡 ng-if 错误答案

【问题标题】：Angular bootstrap tab ng-if bugAngular 引导选项卡 ng-if 错误
【发布时间】：2016-09-12 00:47:24
【问题描述】：

当在选项卡上使用 ng-if 时，如果该语句返回 true，则第二个选项卡将处于活动状态，而不是第一个。

<tabset>
    <tab heading="Static title" ng-if="aaa == true">Static content</tab>
    <tab heading="tab2">Content 2</tab>
</tabset>

我觉得我什么都试过了，但没有运气。

这是一个问题的例子：

我希望你们中的一些人能帮助我！

【问题讨论】：

【解决方案1】：

尝试使用活动属性。像这样

<tabset>
  <tab heading="Static title" active="aaa == true" >Static content</tab>
  <tab heading="tab2">Content 2</tab>
</tabset>

【讨论】：

【解决方案2】：

不是真正的错误，看起来<tabset> 正在更改范围，因此aaa 将引用<tabset> 创建的任何控制器。参考你自己的控制器，TabsDemoCtrl.aaa

<tabset>
    <tab heading="Static title" ng-if="TabsDemoCtrl.aaa == true">Static content</tab>
    <tab heading="tab2">Content 2</tab>
</tabset>

编辑：如果您检查 DOM 元素，您实际上可以看到 <tabset> 正在使用隔离范围：tabbable ng-isolate-scope

【讨论】：

【解决方案3】：

<tabset>
  <tab heading="Static title" active="aaa == true" ng-if="aaa=== true">Static content</tab>
  <tab heading="tab2">Content 2</tab>
</tabset>

应该可以的

【讨论】：

【解决方案4】：

这是因为aaa 中的值是 true，因此它显示静态标题，但您没有添加激活代码，因此它没有被激活。修改代码

<tab heading="Static title" ng-if="aaa" active="aaa">Static content</tab>

【讨论】：

【解决方案5】：

以防万一像我这样的人在 5 年后仍然遇到这个问题。

ng-if 是确定您拥有此选项卡或删除此选项卡的指令。无论如何，如果没有在任何选项卡上指定“活动”，则第一个选项卡应默认激活，但是当您有 ng-if 时，默认行为将被更改。范围，表达式等没有错。

在所有选项卡上添加ng-if，不需要的，只需添加ng-if="true"，这将使默认激活的选项卡恢复正常。

<tabset>
   <tab heading="Static title" ng-if="aaa == true">Static content</tab>
   <tab heading="tab2" ng-if="true">>Content 2</tab>
</tabset>

【讨论】：