angularjs - 单击或从 md-tabs 中选择时加载和调用 md-tab 的内容( Angular 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 页面时，所有选项卡的所有内容都在开始时加载。

难道我们禁止加载，其中在它处于事件状态时加载选项卡的内容(选择/单击时)？

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

我尝试在 parent.html 页面上调用 Child-tab Controller 函数，但除非未加载所有 md-tab 内容，否则无法访问 child-controller 中的任何内容。此页面中唯一可访问的部分将是 parent.html 自己的 Controller 功能。

如果还有其他方法可以继续，请告诉我，或者我在这里完全遗漏了什么？谢谢你。

Answer 1

来自官方文档，用于使用 md-tab ，没有延迟加载内容。

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 ?

我的方法是仅使用按钮选项卡，然后使用动态 ng-include，并在选择选项卡期间设置相关 View ，通过 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>

Controller :

$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