如何使页面只在点击标签时才加载？

Question

我有一个标签指令

app.directive('tabStructure', function () {

return {
    restrict: 'E',
    templateUrl: function (tElement, tAttrs) {
        return tAttrs.templateUrl;
    }

};

});

在ui中，我写了一个标签结构，它可以调用不同的页面。

<div id="Admin" class="tab-pane {{toolbars.tabs.NewPage1}}">
            <div class="tab-content">
                <tab-structure template-url="/page/NewPage1"></tab-structure>

            </div>
        </div>
        <div id="Admin" class="tab-pane {{toolbars.tabs.NewPage2}}">
            <div class="ibox-content" style="padding: 10px 5px 0px 5px !important;border: 1px solid #E8ECEF;">
                <tab-structure template-url="/page/NewPage2"></tab-structure>
            </div>
        </div>
        <div id="Admin" class="tab-pane {{toolbars.tabs.NewPage3}}">
            <div class="ibox-content" style="padding: 10px 5px 0px 5px !important;border: 1px solid #E8ECEF;">
                <tab-structure template-url="/page/NewPage3"></tab-structure>
            </div>

        </div>

但问题是，当主页面加载时，标签内的所有页面都会加载，我想让页面只在我点击标签时加载，如何做到这一点？

Answer 1

设置一个变量来处理选定的tab，并使用ng-if来加载tab。当然，有多种方法可以做到这一点。这里是一种方法。

 // in controller
 $scope.selectedTab = null;

 // in view
 // set up ngIf and ngClick for each tab respectively 
<div class="tab-content" ng-click=“selectedTab = ‘tab1’”>
            <tab-structure ng-if=“selectedTab === ‘tab1’” template-url="/page/NewPage1"></tab-structure>

        </div>