关于ajax：tabs与angular：仅在单击$ http时加载选项卡内容


tabs with angular: loading tab content on click only with $http

我有很多数据的大表格，
因此，我希望标签中包含每个标签的数据块。

我希望在单击标签标题时可以延迟加载标签内容，然后在以后再次选择时不需要重新加载。

我认为这个例子符合我想要的方向：
tab-content中的angular-ui选项卡加载模板

但这似乎加载了一个静态模板：

1
2
3
4
5
6
7
<tabs>
    <pane active="pane.active"
          heading="{{pane.title}}"
          ng-repeat="pane in panes">
       
    </pane>
</tabs>

如何使用$ http.get()动态加载窗格的内容？
注意：这已经是通过ng-view路由加载的页面，因此我无法进行嵌套路由。

编辑：每个选项卡的内容都非常不同，因此理想情况下，我将为每个选项卡或类似的功能提供一个功能和模板...

我想angular-ui是解决这个问题的好方法？

很好奇自己如何通过ajax加载选项卡。 这是我制定的一个小演示。

选项卡具有select属性，该属性在选定时触发。 所以我使用以下选项卡：

1
2
3
4
5
6
7
8
9
<tab heading="{{tabs[0].title}}" select="getContent(0)">
       
        Content 1
         
            {{item}}
         
     
      Loading...
   </tab>

控制器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 $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

相关讨论

另一种方法是使用动态ng-include：

1
2
3
4
5
6
7
<tabset>
    <tab ng-repeat="tab in tabs"
         heading="{{tab.heading}}"
         select="setTabContent(tab.content)">
    </tab>
</tabset>
<ng-include src="tabContentUrl"></ng-include>

然后，控制器具有以下功能：

1
2
3
4
5
6
7
8
9
10
$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";
}

相关讨论