açılı sekmeler: Yükleme sekmesi içeriği sadece $ http ile tıklatılıyor

Question

Çok sayıda veri içeren büyük formlar var, Bu yüzden her sekme için veri parçaları içeren sekmeler istiyorum.

Sekme başlığının tıklatılmasıyla teması yüklenecek içerikler eklemek istiyorum ve daha sonra tekrar seçildiğinde tekrar yüklenmesi gerekmiyor.

Ben bu örnek ne istiyorum yönünde gider düşünüyorum: angular-ui tabs loading template in tab-content

ama bu statik bir şablon yüklemek gibi görünüyor: Nasıl $ http dinamik bölmenin içeriği yükleyebilirsiniz

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

.almak()? Not: Bu zaten ng-view yönlendirme ile yüklenmiş bir sayfadır, bu yüzden iç içe yönlendirme yapamıyorum.

DÜZENLEME: içerik her sekme için oldukça farklıdır, bu yüzden ideal olarak ben bir işlev ve bunun gibi her sekme veya bir şey için bir şablon sağlayacağında ...

ben açısal-ui için iyi bir yoldur olduğunu tahmin Bu konuda gitmek?

Answer 1

Kendime ajax üzerinden sekme yükünün nasıl yükleneceğini merak ettim. İşte çalıştığım küçük bir demo.

Sekmeler, seçildiğinde tetikleyen select özniteliğine sahiptir. Yani bir sekme için aşağıdaki kullanılır:

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

Denetleyici: kullanıcı görüşlerini ve getiri anahtarları, veriler hala hizmet önbelleğinde olacak böylece bir hizmete önbelleği taşımak istiyorsunuz

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

    } 

DEMO

Answer 2

Diğer bir yaklaşım için Dinamik ng-include kullanın: Ben de böyle bir şey yaptığını sona erdi

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