Question

我最近开始使用AngularJS但是在使用md-tabs（https://material.angularjs.org/latest/demo/tabs）时遇到了问题。

在我的页面上，我有几个标签，每个标签中有大约30张图像通过ng-repeat放置。问题是所有选项卡中的所有图像都在页面打开时加载，这需要很长时间。我希望在打开页面时只加载第一个（活动）选项卡的内容，并且只有当所有其他选项卡的内容变为活动状态时才加载它们。

以下是标签的代码：

<md-content>
    <md-tabs md-dynamic-height md-border-bottom md-stretch-tabs="always">
        <md-tab label="Tab One">
            <md-content class="md-padding">
                <div ng-repeat="fruit in Fruits">
                    <img ng-src="images/{{ fruit.FruitId }}.png">
                    <h4>{{ fruit.Name }}</h4>
                </div>
            </md-content>
        </md-tab>

        <md-tab label="Tab Two">
            <md-content class="md-padding">
                <div ng-repeat="veg in Vegetable">
                    <img ng-src="images/{{ veg.VegId }}.png">
                    <h4>{{ veg.Name }}</h4>
                </div>
            </md-content>
        </md-tab>

        <md-tab label="Tab Three">
            <md-content class="md-padding">
                <div ng-repeat="animal in Animals">
                    <img ng-src="images/{{ animal.AnimalId }}.png">
                    <h4>{{ animal.Name }}</h4>
                </div>
            </md-content>
        </md-tab>
    </md-tabs>
</md-content>

基本上我想要做的就是“延迟负载”＃39;每个标签的内容，以便仅在选择相关标签时加载内容。

由于我对Angular很新，我不确定如何处理这个问题。我注意到它已被突出显示为一个问题（https://github.com/angular/material/issues/5500），但尚未提供解决方案。

我在考虑使用ng-if和ng-include的组合动态地将内容添加到所选标签中，但我真的不知道从这种方法开始。

非常感谢任何帮助

Answer 1

执行此操作的一种简单方法是在第一次选中选项卡时将标志设置为true，并等待构建内容DOM直到该标志为true。你必须这样做：

使用选项卡上的md-on-select="::tabXXDisplayed=true"在第一次显示时将变量设置为true（::使表达式成为一次表达式）
在标签内容

ng-if="tabXXDisplayed"

以下是一个示例snipplet：

<md-tab md-on-select="::tabXXDisplayed = true">
    <md-tab-label>tabXX</md-tab-label>' +
    <md-tab-body>
      <div ng-if="tabXXDisplayed">
        // your content for tabXX here
      </div>
    </md-tab-body>
  </md-tab>

Answer 2

md-tabs 具有属性 md-selected

＆＃xA;＆＃xA;

例如：

＆＃xA ;＆＃XA;

 <代码>＆LT; MD-突片＆＃XA; md-selected =“selectedIndex”＆＃xA; MD-中心突舌= “真” ＆＃XA; MD-拉伸突片= “总是” ＆＃XA; md-dynamic-height＆＃xA; md-border-bottom =“”＆gt;＆＃xA;

＆＃xA;＆＃xA;

您可以创建在用户选择新标签时触发的观察器，例如： / p>＆＃xA;＆＃xA;

  $ scope。$ watch（function（）{＆＃xA; return $ scope.selectedIndex;＆＃xA;}，＆＃xA; function（newVal ，oldVal）{＆＃xA;＆＃xA; if（newVal！== undefined＆amp;＆amp; newVal！== oldVal）{＆＃xA; //加载其他图片＆＃xA;}＆＃xA;}）; ＆＃XA;

＆＃XA;

角度材料选项卡延迟加载

2 个答案: