Lade Inhalt md-tabs asynchron

Question

Ich entwickle eine plattformübergreifende App für IOS, verwende Cordova und Angular Material.

Meine Startseite hat drei Registerkarten und in jeder Registerkarte wird der Inhalt vom Web-Service geladen.

Mein Problem ist, wenn App in Ios erstellt wurde, jedes Mal wenn ich zwischen Tabs umschalte, ist der Übergang nicht glatt. Es hat eine Verzögerungszeit, um Daten zu laden.

Gibt es eine Möglichkeit, Daten auf jeder Registerkarte asynchron zu laden, um den Übergang zu wechseln, wird sofort ausgeführt und Inhaltsdaten werden später aktualisiert.

Answer 1

Hier ist ein Beispiel aus meinem Kommentar erweitern - CodePen

es die Fähigkeit zeigt, spezifische Daten aus allen Daten auf bestimmte Register Inhalt zu übergeben. Es gibt viele andere Möglichkeiten, um das gleiche Ergebnis zu erzielen.

Markup

<div ng-cloak="" class="tabsdemoDynamicHeight" ng-app="MyApp" ng-controller="MyController as vm"> 
    <md-content> 
    <md-tabs md-dynamic-height="" md-border-bottom="" md-selected="vm.selectedIndex"> 
     <md-tab label="one"> 
     <md-content class="md-padding"> 
      <content data="vm.allData[vm.selectedIndex]"></content> 
     </md-content> 
     </md-tab> 
     <md-tab label="two"> 
     <md-content class="md-padding"> 
      <content data="vm.allData[vm.selectedIndex]"></content> 
     </md-content> 
     </md-tab> 
     <md-tab label="three"> 
     <md-content class="md-padding"> 
      <content data="vm.allData[vm.selectedIndex]"></content> 
     </md-content> 
     </md-tab> 
    </md-tabs> 
    </md-content> 
</div> 

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 

.controller("MyController", function() { 
    this.allData = [ 
    "John", "Paul", "George" 
    ]; 
}) 

.directive("content", function() { 
    return { 
    template: "<div>{{data}}</div>", 
    scope: {data: "="} 
    } 
});