Question

我有很多有大量数据的表格，所以我希望每个标签都有大量数据标签。

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

我认为这个例子涉及我想要的方向： angular-ui tabs loading template in tab-content

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

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

如何使用$ http.get（）动态加载窗格的内容？注意：这已经是通过ng-view路由加载的页面了，所以我不能做嵌套路由。

编辑：每个标签的内容都大不相同，所以理想情况下我会为每个标签提供一个功能和模板或类似的东西...

我想angular-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：

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

带角度的标签：仅使用$ http加载标签内容

2 个答案: