Angularjs to use jquery ui accordion - timing issue

Question

I want to use Jquery UI's accordion in AngularJS. So i wrote a directive:

angular.module('accordion', [])
    .directive('accordion', function () {
        return {
            restrict: 'AE',
            replace: true,
            link: function (scope, element, attrs) {
                $(document).ready(function () {
                    setTimeout(function () {
                        element.accordion({ icons: false });
                    }, 1000);
                });
            }
        };
    });

And I used the setTimeout because the directive is loaded before the page (or is it? I'm not sure), and so I need the timeout for it to be loaded. Of course the timeout is not always sufficient, and sometimes it is too quickly so I can see the HTML before the directive effect it, and then it changes to accordion and I don't want the users to see it.

Ideas?

TidharPeer · Accepted Answer · 2014-04-01 07:19:49Z

2

Solved it... Added a watch in the directive - that watch a variable that changes when the data recieives from the server - and the accordion is activated!

angular.module('accordion', [])
    .directive('accordion', function () {
        return {
            restrict: 'AE',
            replace: true,
            link: function (scope, element, attrs) {
                scope.$watch('serverData', function (newValue, oldValue) {
                    if (oldValue != newValue) {
                        element.accordion();
                    }
                });
            }
        };
    });

answered Apr 1, 2014 at 7:19

TidharPeer

3,8074 gold badges23 silver badges32 bronze badges

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

Comments

Vlad Gurovich · Accepted Answer · 2014-04-01 05:56:20Z

0

you dont need ($document).ready because directives are linked after angular bootstrapping process which in itself happens after the document is ready.

Now Im not sure what you are using the accordion with, if its image heavy, or uses other templates, its quite possible that this directive will be linked before all the images and ng-includes have loaded.

Can you create plunker with an example?

answered Apr 1, 2014 at 5:56

Vlad Gurovich

8,4732 gold badges30 silver badges28 bronze badges

5 Comments

TidharPeer Over a year ago

Removing the $document.ready didn't help... And I load data from the server - so I think it will be pretty hard to simulate this on plunker...

Vlad Gurovich Over a year ago

does this problem not appear when you use local data?

TidharPeer Over a year ago

Nope.. I can use plain text, with no $document(ready) and no timeout - the directive will only contain the "element.accordion();" line - and it works.

Vlad Gurovich Over a year ago

can you explain what you mean by " it is too quickly so I can see the HTML before the directive effect it, and then it changes to accordion and I don't want the users to see it."

TidharPeer Over a year ago

In Jquery UI accordion - I use <h3><div> several times - with ng-repeat. So when I use the setTimeOut(1000) I can see the original h3 style and then the div with the data from the ng-repeat, I can see this for a moment - and then the directive timeout passes and it changes to accordion as it should be.

Collectives™ on Stack Overflow

Angularjs to use jquery ui accordion - timing issue

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related