Load and call content of md-tab when it's clicked or selected from md-tabs (angular 1.5)

user_2739132 0
Viewed 4024

I'm using following HTML structure in parent.html page (and have corresponding Controller for this parent HTML Page)

<md-tabs md-dynamic-height class="report-tabs" layout-align="center stretch" md-no-pagination="true">
<md-tab>
    <md-tab-label>
        <span class="tab-label">Tab 1</span>
    </md-tab-label>
    <md-tab-body>
        <div ng-include="tab1-page-URL"></div>
    </md-tab-body>
</md-tab>
<md-tab>
    <md-tab-label>
        <span class="tab-label">Tab 2</span>
    </md-tab-label>
    <md-tab-body>
        <div ng-include="tab2-page-URL"></div>
    </md-tab-body>
</md-tab>

Currently when I load this parent.html page, All contents of all tabs are getting loaded at beginning.

  1. Don't we have lazy loading where contents of tab are loaded when it's active (when selected/clicked upon) ?

  2. If we don't have such provision, How can I call function of child tab's controller, when particular tab is selected ? Currently all functions of all child tab's controllers are getting called - which is time consuming and not needed where user will see first tab only when page completes compiling and rendering ?

I've tried calling Child-tab controller functions on parent.html page, but unless all md-tab contents are not loaded, nothing from child-controller is accessible. Only accessible part in this page will be parent.html's own controller functions.

Let me know if any other way I can proceed, Or am I missing completely something here ? Thank you.

angularjs-material angularjs tabs
2 Answers

You could try something like:

<md-tabs md-dynamic-height class="report-tabs" layout-align="center stretch" md-no-pagination="true">
<md-tab md-on-select="onSelect(tab)" ng-repeat="tab in tabs">
    <md-tab-label>
        <span class="{{tab.class}}">{{tab.label}}</span>
    </md-tab-label>
    <md-tab-body>
        <div ng-if="selectedTab === tab.id" ng-include="{{tab.url}}"></div>
    </md-tab-body>
</md-tab>

and in controller:

$scope.tabs = [
    {id: 1, label: "label for tab 1", url: "url-tab-1.html"},
    {id: 2, label: "label for tab 2", url: "url-tab-2.html"}
];

$scope.onSelect = function(tab) {
    $scope.selectedTab = tab.id;
};
$scope.onSelect(1);
user_66392030
Related