2

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

user2263572
  • 5,435
  • 5
  • 35
  • 57
  • How are you starting the angular app? Are you using `ng-app` directive or manual [bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap)? – ivarni Apr 27 '15 at 05:21

1 Answers1

1

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.

Norguard
  • 26,167
  • 5
  • 41
  • 49
  • Thank you, that explains everything. I will create some type of workaround to get this working correctly. – user2263572 Apr 27 '15 at 05:29
  • Unfortunately there is no reasonable way 'work around' what Angular is going and attempt to use old client paradims. The HTML you are looking for will be injected into the DOM after your directive is processed, but there is no way to know when Angular is done. Also, if you are using some directive that dynamically insets new elements that code would never be run. What you should do is in the directive that adds the element run the script on it. But ONLY just on that element not on the entire document looking for those element. The DOM manipulation it what the directive is for. – Enzey Apr 27 '15 at 05:43
  • Yeah; if you want Angular to continue to do its magic, don't try to fight it. Rewrite whatever it was your script was doing. Either move it to the server, in the templates (I don't see that ending well), or write a directive around what you're trying to do, and follow the Angular $digest cycle. Your code doesn't have to be written in Angular, in an Angular fashion, but it definitely should be ported inside of Angular's walls, if you want it to work with custom directives and imports/transcludes, et cetera. – Norguard Apr 27 '15 at 05:49