Jquery UI tab not working in AngularJS

Question

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.

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/

I'm confused by the Fiddle. What's not working right with the JSFiddle? — Nicholas Blasgen
– Nicholas Blasgen, Commented Nov 12, 2014 at 1:26

Liviu T. · Accepted Answer · 2012-11-23 13:23:31Z

1

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);
    };
});

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.

answered Nov 23, 2012 at 13:23

Liviu T.

23.7k10 gold badges64 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

uriDium Over a year ago

Should he not be using the $timeOut service?

Liviu T. Over a year ago

@uriDium If he wants to trigger a $scope.$apply then yes but if it's a purely visual effect then there is no need, the directive is not modifying scope data so there is nothing to apply

uriDium Over a year ago

I just thought that $timeout was guaranteed to execute outside of any digest or apply phases and immediately after the current phase is completed. I just thought it was safer.

Liviu T. Over a year ago

docs.angularjs.org/api/ng.$timeout it's actually the opposite :). After looking in the 1.2.0rc1 codebase it seems it takes a third parameter invokeApply(defaults to true) besides the 2 normal timeout params: fn and delay. So in order to mimic the setTimeout functionality but still call $timeout you need $timeout(fn, 0, false)

Collectives™ on Stack Overflow

Jquery UI tab not working in AngularJS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related