current community

your communities

more stack exchange communities

Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 5 down vote favorite
1

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/

share|improve this question
    
Have you solved this? I'm having the same problem. –  thomas Apr 24 '14 at 8:45
    
I'm confused by the Fiddle. What's not working right with the JSFiddle? –  Nicholas Blasgen Nov 12 '14 at 1:26

1 Answer 1

up vote 1 down vote

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.

share|improve this answer
    
Should he not be using the $timeOut service? –  uriDium Sep 16 '13 at 8:46
    
@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 –  Liviu T. Sep 16 '13 at 10:59
    
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. –  uriDium Sep 16 '13 at 11:59
    
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) –  Liviu T. Sep 16 '13 at 12:13
    
So, this works. But it's still a bad idea? –  thomas Apr 24 '14 at 9:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.