Angular.js：基于活动选项卡加载选项卡，但阻止在访问的选项卡上呈现

Question

我有一个大约有8个标签的页面，每个标签都有很多html控制器（数据绑定）。因此数据渲染变得很慢。
所以我使用基于活动选项卡的ng-if条件，该条件是使用ng-click选项卡找到的。 使用css类可使活动选项卡可见。 因此，在使用ng-if条件后，默认选项卡会快速加载，然后在单击该选项卡时会加载每个选项卡。但是如果我再次单击先前加载的选项卡，则由于ng-if条件会再次重新加载。 如果我不基于活动选项卡使用ng-if条件，则页面的初始加载会非常缓慢，但由于开始时会加载整个选项卡，因此在选项卡之间进行导航会更快。但是由于页面加载开始时会很慢，因此此方法效率不高。 所以我想基于活动标签加载标签，如下所示。但是我不想为加载一次的标签重新加载或渲染标签。 那怎么办呢？

<div class="claimant-data-nav " ng-controller="MyController">
    <ul class="nav nav-tabs ">
        <li ng-repeat="tabname in Mylist | unique:'TabName'" ng-class="{'active':tabname.TabName == 'Tab1'}">
            <a data-target="#tab-{{tabname.TabName}}" data-toggle="tab" ng-click="activetab(tabname.TabName)">{{tabname.TabName}}</a>
        </li>
    </ul>
    <div class="tab-content">
       <a data-toggle="tab" class="mobile-tabs" data-target="#tab-{{tabname1.TabName}}" href="javascript:void(0)" ng-repeat="tabname1 in Mylist | unique:'TabName'">{{tabname1.TabName}}</a>
       <div id="tab-{{tabname2.TabName}}" ng-class="{'tab-pane fade active in':tabname2.TabName == 'Tab1','tab-pane fade':tabname2.TabName != 'Tab1'}" ng-repeat="tabname2 in Mylist | unique:'TabName'">
            <div ng-if="activetab == tabname2.TabName">
            <!-- data binding logic here.It has lot of angularjs databindings.-->
            </div>
        </div>
    </div>
</div>      

Answer 1

您是要从Ajax调用加载所有数据，还是要加载静态模板。 无论哪种情况，都需要维护另一个作用域图，该作用域图将保留已加载/单击的选项卡的状态。 更新您的ng-if条件以执行返回true或false的函数。 该功能可以首先检查活动选项卡，然后检查它是否最初加载。

如果选项卡数据已经加载，那么它只是一个显示/隐藏游戏，否则显示带有绑定和控制器功能。