CODEWITHSUNDEEP
angularjsangularjs-directive
Boney Jose
Boney Jose

Reputation: 315

How to make a page load only when clicking a tab

i have a tabs directive

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

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

};

});

and in ui i have written a tab structure which calls different page

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

But the problem is that all the page which is inside the tab loads when the main page loads i want the pages to only load when i click the tab how to do that

Upvotes: 0

Views: 67

Answers (1)

tbone849
tbone849

Reputation: 955

Set up a variable to handle the selected tab and use ng-if to load a tab. Multiple ways to do this of course. Here is one way. 

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

Upvotes: 1

Related Questions