schede con angolare: caricamento del contenuto della scheda al clic solo con $ http

Question

Ho grandi moduli con molti dati, quindi mi piacerebbe schede con pezzi di dati per ogni scheda.

Mi piacerebbe che il contenuto della scheda fosse pigro caricato al clic del titolo della scheda, e quindi non è necessario ricaricarlo nuovamente quando viene selezionato nuovamente in seguito.

Penso che questo esempio va nella direzione di ciò che voglio: angular-ui tabs loading template in tab-content

ma questo sembra per caricare un modello statico:

<tabs> 
    <pane active="pane.active" 
      heading="{{pane.title}}" 
      ng-repeat="pane in panes"> 
     <div ng-include="pane.content"></div> 
    </pane> 
</tabs> 

Come posso caricare il contenuto del riquadro in modo dinamico con $ http .ottenere()? Nota: questa è già una pagina caricata tramite il routing ng-view, quindi non posso effettuare il routing annidato.

EDIT: Il contenuto è molto diversa per ogni scheda, così idealmente mi piacerebbe fornire una funzione e un modello per ogni scheda o qualcosa del genere ...

immagino angolare-ui è un buon modo per andare su questo?

Answer 1

Ero curioso di sapere come caricare le schede tramite ajax. Ecco una piccola demo che ho elaborato.

Le schede hanno un attributo select che si attiva quando selezionato. Così ho usato in seguito per una scheda:

<tab heading="{{tabs[0].title}}" select="getContent(0)"> 
     <div ng-hide="!tabs[0].isLoaded"> 
     <h1>Content 1</h1> 
      <div ng-repeat="item in tabs[0].content"> 
      {{item}} 
      </div> 
     </div> 
     <div ng-hide="tabs[0].isLoaded"><h3>Loading...</h3></div> 
    </tab> 

Controller:

$scope.tabs = [ 
    { title:"AJAX Tab 1", content:[] , isLoaded:false , active:true}, 
    { title:"Another AJAX tab", content:[] , isLoaded:false } 
    ]; 


    $scope.getContent=function(tabIndex){ 

    /* see if we have data already */ 
    if($scope.tabs[tabIndex].isLoaded){ 
     return 
    } 
    /* or make request for data , delayed to show Loading... vs cache */ 
    $timeout(function(){ 
     var jsonFile='data'+(tabIndex +1)+'.json' 
     $http.get(jsonFile).then(function(res){ 
      $scope.tabs[tabIndex].content=res.data; 
      $scope.tabs[tabIndex].isLoaded=true; 
     }); 

    }, 2000) 

    } 

si muoverebbe la cache per un servizio in modo se l'utente passa viste e ritorni, i dati saranno ancora nella cache servizio

DEMO

Answer 2

Un altro approccio è quello di utilizzare dinamica ng-include:

<tabset> 
    <tab ng-repeat="tab in tabs" 
     heading="{{tab.heading}}" 
     select="setTabContent(tab.content)"> 
    </tab> 
</tabset> 
<ng-include src="tabContentUrl"></ng-include> 

Allora il controllore ha questa:

$scope.tabs = [ 
    { heading: 'Dashboard', content: 'dashboard' }, 
    { heading: 'All Nodes', content: 'nodes' }, 
    { heading: 'Details', content: 'details' }, 
    { heading: 'Dependencies', content: 'dependencies' } 
]; 

$scope.setTabContent = function(name) { 
    $scope.tabContentUrl = "view/" + name + "/index.html"; 
}