1

JQuery's $(document).ready() runs when the HTML has loaded and the DOM can be safely manipulated. When there's an Angular component on our page, can we count on everything in its template being there by that time? Even inside of ng-ifs? Even nested components?

I know that there's an OnInit interface that components can implement, but that won't work in this case; the coder won't have access to any component code. I'm shipping a Web application in which we send out minified, bundled versions of our code but give customers guidance on adding their own customizations to pages inside of <script> tags in the HTML. In giving them advice, are there any assumptions I can make, or will solutions inevitably end up with a bunch of timeouts and retrying when accessing DOM elements?

(Better yet - is there an event they could hook into from JS scripts outside of the component?)

melanie johnson
  • 597
  • 3
  • 16
  • 2
    `When there's an Angular component on our page, can we count on everything in its template being there by that time?` - Doubt it, extremity but: what if your angular code has setTimeouts? I don't think `doc.ready` would wait. `Better yet - is there an event they could hook into from JS scripts outside of the component?` --> sounds like a good solution to implement, have you considered determining when your app is `loaded` and emitting an event they can subscribe to? – Hodrobond Dec 06 '18 at 00:05
  • 1
    Considering that angular can't do anything until the document is ready , `$(document).ready()` is virtually useless – charlietfl Dec 06 '18 at 00:17

1 Answers1

0

Looking here, I found a way to make sure all of your Angular is loaded. In your main view controller, add this code:

$scope.$on("$viewContentLoaded", function() {
    //Your code
})
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79