Вкладки с angular: загрузка содержимого вкладки на клике только с помощью $http

У меня большие формы с большим количеством данных, поэтому я бы хотел, чтобы вкладки с кусками данных для каждой вкладки.

Я бы хотел, чтобы содержимое вкладки было ленивым, загружалось по щелчку заголовка вкладки, и тогда его не нужно перезагружать снова, когда он будет выбран позже.

Я думаю, что этот пример идет в направлении того, что я хочу: angular -ui вкладки загрузки шаблона в вкладке

но это, похоже, загружает статический шаблон:

<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, поэтому я не могу выполнить вложенную маршрутизацию.

EDIT: контент для каждой вкладки совсем другой, поэтому в идеале я бы предоставил функцию и шаблон для каждой вкладки или что-то в этом роде...

Я думаю, angular -ui - хороший способ обойти это?

Ответы

Ответ 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

Ответ 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";
}