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

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

模板 - 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> 

指令

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

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

请您参考如下方法:

问题是，当执行 ngTabs 指令时，该 div 的内容尚未生成。将对 .tabs() 的调用包装在 setTimeout 中即可达到目的。

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

参见jsFiddle 。这可能不是最好的方式/有 Angular 的方式。

您可以查看compile服务，特别是如果实际选项卡在运行时发生变化。