current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite

I am writing a simple tabs application, I used angular js directive to to call the jquery tabs plugin, but the view is not updated properly and I do not see the tabs.

http://jsbin.com/UDIHOTIY/1/edit?html

Here is the code snippet. Can someone help me how to render the tabs correctly?

share|improve this question
    
You have seen the exception right? Line 4: $scope.tabs=data; --- Mixed spaces and tabs. – Yagiz Ozturk Nov 26 '13 at 8:05
    
@YagizOzturk this actually should not be a problem in javascript. – Santhosh Nov 26 '13 at 8:10

1 Answer 1

up vote 2 down vote accepted

It seems that the DOM is not ready before the directive fires. Using a $timeout works for me:

.directive('hTabs', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            $timeout(function(){
                var jqueryElm = $(elm[0]);
                $(jqueryElm).tabs();
            },1000);
        }
    };
});
share|improve this answer
    
setting a timeout in my directive is working. I have one question though, how do I choose the right time out? What is the difference between setting timeout to 0 vs 1000? – Santhosh Nov 26 '13 at 8:08
1  
Initially I tried with 0 but did not work. Since you 're not firing any https, a delay of 1 - 2 secs should be good I think. – CodeHater Nov 26 '13 at 8:10

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.