jQuery UI的选项卡中AngularJS不工作 [英] Jquery UI tab not working in AngularJS

问题描述

我使用jQuery用户界面选项卡中angularJS并用NG-重复生成列表项和选项卡容器。选项​​卡工作，但标签的容器都不能正常工作。

I am using jquery UI tab in angularJS and used ng-repeat to generate list items and tab containers. Tabs are working but the tab containers are not working properly.

模板 - 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指令时，尚未产生该分区的内容。在包装的setTimeout调用.tabs（）就可以了。

The problem is that when the ngTabs directive is executed the content of that div is not generated yet. Wrapping the call to .tabs() in a setTimeout will do the trick.

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

请参见的jsfiddle 。这可能不是最好的方式/角度的方式。

see jsFiddle. This might not be the best way/the angular way.

您可以看看在编译的服务，特别是如果实际的标签变化在运行时。

You could take a look at the compile service especially if the actual tabs change at runtime.

这篇关于jQuery UI的选项卡中AngularJS不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！