javascript - Angularjs:根据事件选项卡加载选项卡，但阻止在访问的选项卡上呈现

Question

我的页面有大约 8 个选项卡，每个选项卡都有很多 html Controller (数据绑定(bind))。因此数据渲染变得很慢。
因此，我使用基于事件选项卡的 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 的函数。该函数可以首先检查事件选项卡，然后检查它是否最初加载。

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