我有很大的形式​​有很多的数据， 所以我想用的标签数据块为每个标签。

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.

我觉得这个例子进入了我想要的方向： angular-ui制表内容标签加载模板

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>

我怎样才能用$ http.get（）动态加载窗格中的内容？ 注：这是已经通过NG-查看路由加载的页面，所以我不能做嵌套路由

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.

编辑：内容是每个标签完全不同，所以最好我会提供一个功能，每一个选项卡或类似的东西的模板......

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

我想角的UI是一个很好的方法来进行此事？

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

推荐答案

很好奇自己如何通过AJAX使得制表负荷。这里有一个小演示中，我摸索出。

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>

控制器：

 $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

演示