tabs with angular: loading tab content on click on

Question

I have big forms with lots of data, so I'd like tabs with chunks of data for each tab.

I'd like tab content to be lazy loaded on click of the tab title, and it then doesn't need to be reloaded again when selected again later.

I think this example goes into the direction of what I want: angular-ui tabs loading template in tab-content

but this seems to load a static template:

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

How can I load the pane's content dynamically with $http.get()? Note: this is already a page loaded via ng-view routing, so I can't do nested routing.

EDIT: The content is quite different for every tab, so ideally I'd provide a function and a template for every tab or something like that...

I guess angular-ui is a good way to go about this?

Answer 1

Another approach is to use dynamic ng-include:

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

Then the controller has this:

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

Answer 2

Was curious myself how to make tabs load via ajax. Here's a little demo I worked out.

Tabs have a select attribute that triggers when selected. So I used following for a tab:

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

  }

Would move the cache to a service so if user switches views, and returns, data will still be in service cache

DEMO