CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsbrowser
user2263572
user2263572

Reputation: 5606

How does document.ready work with angular element directives?

In my current project I'm using angular directives to create custom html elements. See example below.

banner.js

app.directive('banner', function () {

    return {
        restrict: 'E',
        replace: true,
        templateUrl: './common/banner/banner.html'
    };
});

Banner.html

<div>
    <div class="banner-image"></div>
</div>

Issue: There is a javascript file that adds additional properties to elements with the banner-image class after document.ready. This worked perfectly before using angular element directives, but the properties are no longer being added.

Question: Does the document.ready callback occur prior to angular element directives being rendered in the dom? If so, that could explain why my javascript file is no longer making the necessary changes to the html elements.

Thank you

Upvotes: 2

Views: 733

Answers (1)

LetterEh
LetterEh

Reputation: 26696

This is less a "directives" question, and more an Angular sequence of events question.

Angular itself (if not manually started with .bootstrap) will defer its loading until .onready.

At that point in time, Angular expects that all JS it needs to run will be there and registered.

Then Angular starts up. Then after Angular starts up, Angular parses the DOM to find a root element to attach to (the one with the ng-app directive).

Then it recursively goes down the line, injecting controllers and building out directives and interpolating nodes as it goes.

Now we are way past any code that would have fired on DOMReady.

Upvotes: 1

Related Questions