使用制表符的 ng-repeat 问题答案

【问题标题】：problems with ng-repeat using tabs使用制表符的 ng-repeat 问题
【发布时间】：2016-02-12 07:20:50
【问题描述】：

在标签内使用链接时我遇到了问题，它改变了视图并替换了标签。只有在选项卡中使用 ng-repeat 时才会出现此问题，而在静态选项卡中不会出现此问题。

这是主页：

<div  ui-view name="pageContent">
<uib-tabset>
    <uib-tab ng-repeat="tab in tabs" heading="{{tab.name}}"  active="tab.active" ng-click="!tab.disable && load(tab.link,tab.id)">
    </uib-tab>
    <!-- <uib-tab heading="Static title">Static content</uib-tab>
    <uib-tab heading="Static title">Static content 2</uib-tab> <!-- when I use the comment code it works. -->
    </uib-tabset>
    <div>
        <a class="btn btn-link" ui-sref="xxxx.yyyyy" role="button">
            {{$storage.aaaa.bbbbb}}
        </a><!-- this view replace the pageContent -->
    </div>
</div>

错误是：

错误：[$compile:ctreq] 控制器“uibTabset”，指令“uibTab”需要，找不到！

提前致谢

【问题讨论】：

它看起来像是一个已知的错误（它似乎还没有被修复）：github.com/angular-ui/bootstrap/issues/3692我还没有阅读整个线程，但我认为解决方案就在这里
错误是相似的，虽然不完全一样，但他们谈论 ng-repeat 和 ui-view 所以看起来情况是一样的。最新答案之一（13 天前）说：我认为不应将选项卡嵌套在元素中 - 当将其移出时，错误会在上面的 Plunker 上消失，如此处所示。如果要控制显示，可以使用简单的 ng-show/ng-hide 或 ng-if。
非常感谢南。我会这样做的
让我们知道它是否有效以及您做了什么来解决这个问题

标签： angularjs uiview angular-ui-router angularjs-ng-repeat angular-ui-tabset

【解决方案1】：

下面更干净的方式：

如果你有纯 html，我正在使用 pug 提防（更改）语法。

 uib-tabset(type="tabs")
 uib-tab(ng-repeat="tabs in tabs track by $index" ng-click="$index = !$index" )
  uib-tab-heading
    span {{ tabs.name }}
    div(ng-if="$index === true")
      span {{ content goes here }}

【讨论】：

【解决方案2】：

我整理好了。这就是代码。

 <div class="row top-margin" ng-show=" uiRouterState.current.name !='xxxx'">
   <div class="col-md-12">
      <uib-tabset>
         <uib-tab ng-repeat="tab in tabs" heading="{{tab.name}}"  active="tab.active" ng-click="!tab.disable && load(tab.link,tab.id)">
         </uib-tab>
     </uib-tabset>
  </div>
</div>
<div  ui-view name="pageContent">      
 <a class="btn btn-link" ui-sref="xxxx" role="button">
     Link 
 </a><!-- this link replace the "pageContent" with view xxxxx  -->
<div>

我在控制器中创建了一个名为 $scope.uiRouterState = $state 的 $scope 变量，用于存储当前状态。

【讨论】：

感谢发布答案