Jquery UI选项卡在AngularJS中不起作用

我在angularJS中使用jquery UI选项卡，并使用ng-repeat生成列表项和选项卡容器。 选项卡正在运行，但选项卡容器无法正常工作。

模板 – tabs.html

 
 {{page.name}} 
 
 
 
{{page.id}}
  

指示

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

jsfiddle链接： http ： //jsfiddle.net/sannitesh/NLw6y/

Answer 1

问题是，当执行ngTabs指令时，尚未生成该div的内容。 在setTimeout中包含对.tabs（）的调用就可以了。

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

见jsFiddle 。 这可能不是最好的方式/角度方式。

您可以查看编译服务，尤其是在实际选项卡在运行时更改的情况下。