为什么我在这里得到 document.getElementById 的空值？

Question

代码笔：http://codepen.io/leongaban/pen/YyWmOo?editors=101

在 my app 中，我有一个简单的 div id 名称数组 media = ["twitter", "news", "blogs"]

然后我有一个简单的 for 循环，它试图从标记中获取 #id 并将它们添加到我的 vm.parameters 对象中。

目前 div 显示为 null:

我控制器中的代码：

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);
}

标记（使用 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

DOM 代码不属于控制器。控制器甚至会在路由模板加载之前运行，因此您正在寻找尚不存在的元素。

通常不需要查找 elementById 。通常你会让你的数据模型驱动视图的创建

如果您必须像这样进行 dom 操作，您需要在指令中进行操作，以确保当您的代码运行s

时元素存在

Answer 2

在尝试获取 ID 之前，您需要执行一个 onload 事件。这是因为控制器运行在 DOM 加载之前：

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

Answer 3

您也可以使用

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

在您的 angular.run() 中，将在内容加载后执行。

为什么我在这里得到 document.getElementById 的空值？

Why am I getting null for document.getElementById here?

javascript

getelementbyid

domdocument

angularjs