角度材料标签延迟加载

Question

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

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

这是我的选项卡代码：

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

因此，从本质上讲，我想做的是"延迟加载"每个选项卡的内容，以便仅在选择相关选项卡时加载内容。

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

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

任何帮助将不胜感激

Answer 1

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

• 使用选项卡上的md-on-select="::tabXXDisplayed=true"在首次显示时将变量设置为 true(::使表达式成为一次性表达式)
• 在选项卡内容上使用ng-if="tabXXDisplayed"

下面是一个截图示例：

<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

例如：

<md-tabs
md-selected="selectedIndex" 
md-center-tabs="true"
md-stretch-tabs="always"
md-dynamic-height 
md-border-bottom="">

可以创建在用户选择新选项卡时触发的观察程序，例如：

$scope.$watch(function () {
return $scope.selectedIndex;
},
function (newVal, oldVal) {
if (newVal !== undefined && newVal !== oldVal){
// load other images
}
});