角度材质标签懒惰加载

我最近开始使用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的组合来动态地将内容添加到选定的选项卡，但我不知道从哪里开始使用此方法。

任何帮助，将不胜感激

来源

2017-05-19 php123

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

来源

2017-05-19 17:50:15

一个sim这样做的方法是在第一次选中选项卡并等待构建内容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>

来源

2017-06-24 10:16:41 Waruyama

角度材质标签懒惰加载

回答

相关问题