单击或从md-tabs中选择时加载和调用md-tab的内容(角度1.5)

Question

我在parent.html页面中使用以下HTML结构(并为此父HTML页面设置了相应的Controller)

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

目前,当我加载此parent.html页面时,所有选项卡的所有内容都在开始时加载.

1. 在激活(当选择/点击)选项卡的内容时,我们是否有延迟加载？

2. 如果我们没有这样的规定,当选择特定标签时,如何调用子选项卡控制器的功能？目前所有子选项卡控制器的所有功能都被调用 - 这是耗时的,并且不需要用户只有在页面完成编译和渲染时才能看到第一个选项卡？

我已尝试在parent.html页面上调用Child-tab控制器函数,但除非未加载所有md-tab内容,否则无法访问子控制器中的任何内容.此页面中只有可访问的部分将是parent.html自己的控制器功能.

如果有任何其他方式我可以继续,请告诉我,或者我在这里完全遗漏了什么？谢谢.

Answer 1

从官方文档来看,对于使用md-tab,没有延迟加载内容.

如果我们没有这样的规定,当选择特定标签时,如何调用子选项卡控制器的功能？目前所有子选项卡控制器的所有功能都被调用 - 这是耗时的,并且不需要用户只有在页面完成编译和渲染时才能看到第一个选项卡？

我的方法是使用仅按钮选项卡,然后使用动态ng-include,并在选择选项卡时设置关联视图,通过md-on-select

就像是:

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

控制器:

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

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

模板目录:

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