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

Question

我有一个包含大约 8 个选项卡的页面，每个选项卡都有很多 html 控制器（数据绑定）。所以数据呈现变得很慢。
所以我使用了基于活动选项卡的 ng-if 条件，该活动选项卡是使用 ng-click on tab 找到的。使用 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 的函数。该功能可以首先检查活动选项卡，然后检查它是否最初加载。

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