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

Question

我在 parent.html 页面中使用了以下 HTML 结构（并为此父 HTML 页面设置了相应的控制器）

<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 页面时，所有选项卡的所有内容都在开始时加载。

难道我们没有延迟加载选项卡的内容在它处于活动状态时加载（当 selected/clicked 时）吗？
如果我们没有这样的规定，当特定选项卡被选中时，我如何调用子选项卡控制器的函数？目前正在调用所有子选项卡控制器的所有功能 - 这非常耗时且不需要，因为只有在页面完成编译和呈现时用户才会看到第一个选项卡？

我试过在 parent.html 页面上调用子选项卡控制器函数，但除非所有 md-tab 内容都未加载，否则无法访问子控制器中的任何内容。此页面中唯一可访问的部分是 parent.html 自己的控制器功能。

让我知道是否还有其他方法可以继续，或者我在这里完全遗漏了什么？谢谢。

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，并在 select 选项卡期间设置相关视图，通过 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

Answer 2

您可以尝试类似的方法：

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

在控制器中：

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

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

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

tabs

angularjs

angularjs-material