带有角的选项卡:只在单击$http时加载选项卡内容。

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

我认为这个例子是指向我想要的方向的:angular-ui标签加载模板的表格内容。

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.

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

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?

我想angular-ui是解决这个问题的好办法吗?

2 个解决方案

#1

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

我很好奇如何通过ajax加载制表符。这是我做的一个小演示。

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

选项卡有一个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>

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

演示

#2

Another approach is to use dynamic ng-include:

另一种方法是使用动态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";
}

#1