angularjs – 在md-tabs中单击或选择md-tab时加载和调用内容(角

发布时间：2020-12-17 17:33:29 所属栏目：安全来源：网络整理

导读：我在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

我在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自己的控制器功能.

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

解决方法

从官方文档来看,对于使用 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,并在选择选项卡时设置关联视图,通过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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!