为什么我的document.getElementById为null？

Question

Codepen: http://codepen.io/leongaban/pen/YyWmOo?editors=101

In my app , I have a simple array of div id names media = ["twitter", "news", "blogs"]

I then have a simple for loop which attempts to grab the #ids from the markup and add them into my vm.parameters object.

Currently the div's are showing as null :

---

Code in my Controller:

var vm = this;
    vm.parameters = {};

var media = ['twitter', 'news', 'blogs'];

console.log(vm);
console.log(media);

initParameters();

function initParameters() {
    console.log('initParameters called...');
    for (var i=0; i<media.length; i++) {
        vm.parameters[media[i]]       = {};
        vm.parameters[media[i]].start = 0;
        vm.parameters[media[i]].limit = 10;
        vm.parameters[media[i]].total = 0;
        vm.parameters[media[i]].div   = document.getElementById(media[i]);
        console.log('getElementById =',document.getElementById(media[i]));
    }

    console.log('media = ',media);
    console.log('vm.parameters = ',vm.parameters);
}

Markup (Using the Ionic framework ):

<ion-slide id="twitter">
    <h3>Twitter stream</h3>
    <p>Here is content for Twitter</p>
</ion-slide>
<ion-slide id="news">
    <h3>News stream</h3>
    <p>Here is content for News</p>
</ion-slide>
<ion-slide id="blogs">
    <h3>Blogs</h3>
    <p>Here is content for blogs</p>
</ion-slide>

Answer 1

You will need to do an onload event before trying to get the id's. This is because the controllers run before the DOM loads:

window.onload = function(){
    initParameters();
}

Answer 2

DOM code doesn't belong in controllers. The controller will run before the route template is even loaded so you are looking for elements that don't exist yet.

Generally there shouldn't be any need to look for elementById . Normally you would let your data model drive creation of the view

If you must do dom manipulation like this you need to do it in a directive to be assured the element(s) exist when your code runs

Answer 3

You can also use

$rootScope.$on('$viewContentLoaded', function(){
    // your code
});

in your angular.run() , will execute once content loaded.