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

我们是否有延迟加载选项卡的内容在活动时（选中/点击时）加载？
如果我们没有这样的规定，当选择特定标签时，如何调用子标签控制器的功能？目前所有子选项卡控制器的所有功能都被调用 - 这是耗时的，并且不需要用户只有在页面完成编译和渲染时才能看到第一个选项卡？

我尝试在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目录：

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

Answer 2

您可以尝试以下方法：

31 january 2018------>31
1 February 2018 ----->32
.......
31 December 2018 ----->365

并在控制器中：

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

点击或从md-tabs中选择md-tab时加载和调用内容（角度1.5）

2 个答案: