zakładki z kanciastym: ładowanie zawartości zakładki na kliknięcie tylko za pomocą $ http

Question

Mam duże formularze z dużą ilością danych, , więc chciałbym mieć zakładki z porcjami danych dla każdej karty.

Chciałbym, aby zawartość karty była leniwy wczytywana po kliknięciu tytułu karty, a następnie nie trzeba jej ponownie ładować po wybraniu ponownie później.

myślę, że ten przykład idzie w kierunku tego, co chcę: angular-ui tabs loading template in tab-content

ale to wydaje się załadować statyczny szablon:

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

Jak mogę załadować zawartość stopniu tafla jest z $ http dynamicznie .otrzymać()? Uwaga: to już strona ładowana za pośrednictwem routingu ng-view, więc nie mogę zagnieżdżać routingu.

EDIT: Zawartość jest zupełnie inna dla każdej karcie, więc idealnie chciałbym zapewnić funkcję i szablon dla każdej karty czy coś takiego ...

Chyba kątowe-ui jest dobrym sposobem o tym?

Answer 1

Byłem ciekawy jak załadować karty za pośrednictwem ajax. Oto małe demo, które opracowałem.

Karty mają atrybut select, który uruchamia się po wybraniu. Więc użyłem następujących na zakładce:

<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> 

Kontroler:

$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) 

    } 

ruszy cache do usługi, więc jeśli użytkownik przełączy widoki i powroty, dane nadal będą w pamięci podręcznej usług

DEMO

Answer 2

Innym podejściem jest wykorzystywać dynamiczny ng-include:

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

Następnie kontroler ma to:

$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"; 
}