Karta Jquery UI nie działa w AngularJS

Question

Używam zakładki jquery UI w angularJS i użyłem ng-repeat do wygenerowania elementów list i kontenerów tabulacji. Karty działają, ale kontenery tabulacji nie działają poprawnie.

template - tabs.html

<ul ng-sortable="pages"> 
    <li ng-controller="pageCtrl" ng-repeat="page in pages"> 
     <a class="pageName" href="#{{page.id}}">{{page.name}}</a> 
    </li> 
</ul> 
<div id="{{page.id}}" ng-repeat="page in pages"> 
    <p>{{page.id}}</p> 
</div> 

dyrektywa

.directive('ngTabs', function($rootScope) { 
     return { 
      restrict: 'E', 
      templateUrl: "js/templates/tabs.html", 
      link: function(scope, elm) { 
       elm.tabs(); 
      } 
     }; 
    }) 

jsfiddle Link: http://jsfiddle.net/sannitesh/NLw6y/

Answer 1

Problem polega na tym, że gdy dyrektywa ngTabs wykonywana jest treść, która div nie jest jeszcze wygenerowany. Zawijanie wywołania do .tabs() w metodzie setTimeout wystarczy.

myApp.directive('ngTabs', function() { 
    return function(scope, elm) { 
     setTimeout(function() { 
      elm.tabs(); 
     },0); 
    }; 
}); 

patrz jsFiddle. To może nie być najlepszy/kątowy sposób.

Możesz zajrzeć do usługi compile, szczególnie jeśli rzeczywiste zakładki zmieniają się w czasie wykonywania.