Script not running when the view load

Question

I have the following simple JavaScript to run, referring to a element inside an angular view:

var buttons = document.querySelectorAll('.msg-type i');
console.log(buttons.length);

It print on the console 0, which is wrong (there are 3 elements on the page).

The problem is, my script is included in the index page, not in the view itself, and I don't want to fragmentate my script to avoid too much HTTP requests and so reducing load time.

How can I run the script when my view load?

Removing angular.js as this has nothing to do with that framework — Ryan, Jul 10 '14 at 14:10
@pixelbits it's running into an angular view, outside of angular it seems it's working. — Alberto, Jul 10 '14 at 14:11
If it prints `0` then there is no element in the DOM at the time you do the query. As it returns `3` if you do it in the console, then the elements are added later to the DOM. — t.niese, Jul 10 '14 at 14:12
@t.niese I tried to wrap the whole thing into `DOMContentLoaded`, still same result — Alberto, Jul 10 '14 at 14:17
Could you include the context of where it is being called? There is not enough information to figure out what's wrong. — Michael Kang, Jul 10 '14 at 14:22
@pixelbits the script is included at the end of the page, as with others. It's running inside a specific angular view. — Alberto, Jul 10 '14 at 14:24
[`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded) `[...] is fired when the document has been completely loaded and parsed[...]` but as you use angular the DOM may/will change after the initial document was loaded. I guess your elements are in a view, so you need to wait until that view is rendered. I don't know angular that well but I guess that is some event or callback for that. — t.niese, Jul 10 '14 at 14:28
@true as the elements are probably in a view and the angular tag was not necessarily wrong. — t.niese, Jul 10 '14 at 14:31
@t.niese yes, upon more testing, the problem IS angular. what's more strange, is, any other script that's not referring to the view, it's working. But if I move the script from the end of the document to the header, before angular is called, also the others stop working — Alberto, Jul 10 '14 at 14:33
I found this other question where they discuss the problem: http://stackoverflow.com/questions/18220197/angularjs-does-not-load-scripts-within-ng-view — Alberto, Jul 10 '14 at 14:38
Thank you very much for the downvotes and for removing the appropriate tags. — Alberto, Jul 10 '14 at 14:38
@Alberto Well the way you ask the question is really broad (you should have explained that you already load event, that the elements are in an angualr view, ....) . It at first looks like the common problem with document ready and as you don't mention that you already tried this, indicates that you didn't do any research in this direction. That's why you most likely got the down votes. Even if the `angular` tag would not have been removed you would have got the down votes and the probability get a reasonable answer would have still been low. — t.niese, Jul 10 '14 at 14:50
@t.niese The problem is, up until now, I was not even aware Angular views was causing the problem. I did a Google search of course, but the problem is, what can you search if you don't even know what's causing your problem? Anyway, thanks for the help. I'm still not happy with the solution, I don't want to fragmentate my script and use jquery, but I asked a question on the other answer. — Alberto, Jul 10 '14 at 14:54
For the community-sake I have "restaurated" my question, providing more appropriate details and I solution I came up with. — Alberto, Jul 12 '14 at 16:52

Ryan · Answer 1 · 2014-07-10T14:15:39.387

0

Execute this code on-load if it isn't the last thing in the document

window.addEventListener("DOMContentLoaded", function() { 
    var buttons = document.querySelectorAll('.msg-type i');
    console.log(buttons.length);
});

edited Jul 10 '14 at 14:15

answered Jul 10 '14 at 14:09

Ryan

14,392
8
62
102

that way it's not executing at all – Alberto Jul 10 '14 at 14:13
@Alberto - DOMContentLoaded – Ryan Jul 10 '14 at 14:15
Still 0, but If I remove angular, I get 3. I'm simply using ng-view – Alberto Jul 10 '14 at 14:21

score 0 · Accepted Answer · answered Jul 12 '14 at 16:51

The solution is to simply create a function, and then call this function in the view controller:

script.js:

var init = function() {
     var buttons = document.querySelectorAll('.msg-type i');
     console.log(buttons.length);
}

controller.js:

myApp.controller('ctrlName', function($scope) { 
     init();
});

Script not running when the view load

2 Answers2