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

Question

我在 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/sanitesh/NLw6y/

Answer 1

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

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

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

您可以查看编译服务，特别是如果实际选项卡在运行时发生更改。