La pestaña IU de Jquery no funciona en AngularJS

Question

Estoy usando la pestaña jQuery UI en angularJS y uso ng-repeat para generar elementos de lista y contenedores de pestañas. Las pestañas funcionan, pero los contenedores de pestañas no funcionan correctamente.

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

Directiva

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

enlace jsFiddle: http://jsfiddle.net/sannitesh/NLw6y/

Answer 1

El problema es que cuando la directiva ngTabs se ejecuta el contenido de ese div aún no se ha generado Envolver la llamada a .tabs() en un setTimeout hará el truco.

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

ver jsFiddle. Esta podría no ser la mejor manera/la forma angular.

Puede echar un vistazo al servicio compile especialmente si las pestañas reales cambian en el tiempo de ejecución.