角度材質標籤懶惰加載

我最近開始使用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

角度材質標籤懶惰加載

回答

相關問題