jQuery plugin is not rendered after angular js

Question

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?

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

AlwaysALearner · Accepted Answer · 2013-11-26 08:04:25Z

2

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

answered Nov 26, 2013 at 8:04

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

2 Comments

Santhosh Over a year ago

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?

AlwaysALearner Over a year ago

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.

Collectives™ on Stack Overflow

jQuery plugin is not rendered after angular js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related