टैब: केवल $ http

Question

साथ क्लिक पर लोड हो रहा है टैब सामग्री मैं डेटा के बहुत सारे के साथ बड़ा रूप हो, तो मैं प्रत्येक टैब के लिए डेटा का हिस्सा के साथ टैब चाहते हैं।

मैं चाहता टैब सामग्री टैब शीर्षक के क्लिक पर लोड आलसी होने के लिए, और यह फिर जब बाद में फिर से चुने गए फिर पुनः लोड करने की आवश्यकता नहीं है।

मैं इस उदाहरण मैं क्या चाहते हैं की दिशा में चला जाता है लगता है: angular-ui tabs loading template in tab-content

लेकिन यह एक स्थिर टेम्पलेट लोड करने के लिए लगता है: मैं कैसे $ http के साथ गतिशील रूप फलक की सामग्री लोड कर सकते हैं

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

।प्राप्त()? नोट: यह पहले से ही एक पृष्ठ एनजी-व्यू रूटिंग के माध्यम से लोड किया गया है, इसलिए मैं नेस्टेड रूटिंग नहीं कर सकता।

संपादित करें: सामग्री हर टैब के लिए काफी अलग है, इसलिए आदर्श रूप में मैं एक समारोह है और हर टैब या ऐसा ही कुछ के लिए एक टेम्पलेट प्रदान करेंगे ...

मुझे लगता है कि कोणीय-ui एक अच्छा तरीका है इस बारे में जाओ?

Answer 1

अपने आप उत्सुक कैसे ajax के माध्यम से टैब लोड करने के लिए दिया गया है। यहां एक छोटा सा डेमो है जो मैंने काम किया था।

टैब्स एक select विशेषता जब चयनित चलाता है कि है। तो मैं एक टैब के लिए निम्नलिखित का प्रयोग किया:

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

नियंत्रक:

$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

एक और दृष्टिकोण करने के लिए है गतिशील ng-include का उपयोग करें:

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