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

Question

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.

Answer 1

From the official doc, for using md-tab , there are no lazy loading contents.

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 ?

My method is by using the button only tabs, then using dynamic ng-include, and setting the reladed view during selecting the tab, by md-on-select

something like:

<md-tabs>
  <md-tab label="Tab #1" md-on-select="onTabSelected(1)"></md-tab>
  <md-tab label="Tab #2" md-on-select="onTabSelected(2)"></md-tab>
  <md-tab label="Tab #3" md-on-select="onTabSelected(3)"></md-tab>
</md-tabs>
<md-content class="md-padding">
    <ng-include src="'templates/tabs/'+ tabId +'.html'"></ng-include>
</md-content>

controller :

$scope.tabId = 1; //default template loaded

$scope.onTabSelected = function(tabId) {
    //you can add some loading before rendering
    $scope.tabId = tabId;
};

templates directory:

templates/
    tabs/
       1.html
       2.html
       3.html

Answer 2

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