Как сделать так, чтобы страница загружалась только при нажатии на вкладку

Question

у меня есть директива tabs

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

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

};

});

и в пользовательском интерфейсе я написал структуру вкладок, которая вызывает другую страницу

<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

Установите переменную для обработки выбранной вкладки и используйте ng-if для загрузки вкладки. Конечно, есть несколько способов сделать это. Вот один способ.

 // 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>