Geek asks and answers

JQuery UI tab not working in AngularJS

I use jQuery UI tab in angularJS and use ng-repeat to create list items and tab containers. Tabs work, but tab containers don't work correctly.

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

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

jsfiddle link: http://jsfiddle.net/sannitesh/NLw6y/

+5
source share
1 answer

The problem is that when the ngTabs directive is executed, the contents of this div are not yet created. Wrapping a call to .tabs () in setTimeout will do the trick.

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

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

You can take a look at compile , especially if the actual tabs change at runtime.

+1
source

More articles:


All Articles