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的函数。该函数可以首先检查活动选项卡，然后检查它是否最初加载。

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

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

1 个答案: