AngularJS, JQuery and Onload Event

Question

I am writing an application on Ruby on Rails using AngularJS for resource management (dynamic loading etc) and JQuery for effects like accordion, fade in-out etc.

When I want to display my data on a page I query the data from the resource using an Angular JS controller and then I display them accordingly using ng-repeat and ng-show. When this is completed I need to setup the JQuery onclick events to add effects (Accordion to be specific). Unfortunately I cannot find an event that will be called when all DOM components are loaded and when all Angular digestion is completed. Meaning the JQuery's onload event is not working and also trying to use a directive like ng-repeat finish event that one produces an error that digest already in progress.

AngularJS is pretty new and I am having difficulties finding good documentation.

Does any one have any ideas? Thanks!

Have you tried this example from the question you linked: plnkr.co/edit/icWaAW — lucuma
– lucuma, Commented Apr 22, 2013 at 16:28

Community · Accepted Answer · 2017-05-23 10:30:45Z

You must wait until ng-repeat has completed before using jQuery to init Accordion.

Here is a directive for doing that ( http://jsfiddle.net/tQw6w/ ); it calls a specified function when true:

.directive('repeatDone', function() {
    return function(scope, element, attrs) {
        if (scope.$last) { // all are rendered
            scope.$eval(attrs.repeatDone);
        }
    }
})

and the html:

<ul>
    <li ng-repeat="feed in feedList" repeat-done="layoutDone()" ng-cloak>
        <a href="{{feed}}" title="view at {{feed | hostName}}" data-toggle="tooltip">{{feed | strip_http}}</a>
    </li>
</ul>

and the function in the controller:

$scope.layoutDone = function() {
    $timeout(function() { $('a[data-toggle="tooltip"]').tooltip(); }, 0); // wait...
}

I have found that $timeout with interval=0 before doing DOM manipulation is required, like initializing tooltips in the fiddle, or your Accordion.

Answered previously here: https://stackoverflow.com/a/16142327/2275421

Jason Aller · Accepted Answer · 2014-04-06 15:16:09Z

2

You can put your jQuery code inside $apply, like this:

$scope.$apply(function() {
    // jQuery stuff here
});

if it fires error like "digest in progress", you can use setTimeout:

setTimeout(function(){
    $scope.$apply(function() {
        // jQuery stuff here
    });
 });

Directive way:

//Directive - STRART
.directive("yourNameHere", function() {
    return function(scope, element, attrs) {
        $(element).jQueryStuffHere();
    };
})//Directive -END

Hope it helps, Cheers

edited Apr 6, 2014 at 15:16

Jason Aller

3,66028 gold badges43 silver badges40 bronze badges

answered Apr 22, 2013 at 16:38

Vova Lando

5583 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS, JQuery and Onload Event

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related