角材タブ遅延ロード

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

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

Answer 2

シム最初にタブが選択され、フラグが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>