angularjs - 使用制表符的 ng-repeat 问题

Question

在选项卡内使用链接时，我遇到了问题，它改变了视图并替换了选项卡。仅当在选项卡中使用 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' 需要，找不到！

提前致谢

Answer 1

我整理了一下。这就是代码。

 <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 变量，用于存储当前状态。

Answer 2

更清洁的方式如下：

如果您有纯 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 }}