“无法读取未定义的属性 'childNodes'” 使用 list.js 将控制器添加到列表元素答案

【问题标题】："Cannot read property 'childNodes' of undefined" adding controller to list element with list.js“无法读取未定义的属性 'childNodes'” 使用 list.js 将控制器添加到列表元素
【发布时间】：2015-04-30 14:55:43
【问题描述】：

我正在尝试使用 list.js 库创建一个列表对象并将其添加到 angular.js 根范围，以便在嵌套范围中使用它。只要我不向列表元素添加控制器，这工作正常。

如果这样做，我会在 javascript 控制台中收到以下错误。

“无法读取未定义的属性‘childNodes’”

如果列表在使用 ng-init 调用的 init() 函数中初始化，也会发生同样的情况。

这里是html和js文件

<html>
<head>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
    <script type="text/javascript" src="listBug.js"></script>
</head>
<body ng-controller="MainController" ng-app="theApp">
<div id="theList">
    <ul class="list">
        <li>
            <div ng-controller="divController">
                <span class="id"></span>
            </div>
        </li>
    </ul>
</div>      
</body>

</html>

listBug.js

var app = angular.module('theApp', [])

mainController=function($scope){

    var opts={valueNames: ['id'] }
    $scope.theList=new List('theList', opts);
}

app.controller("MainController", mainController)


divController=function($scope){

}

app.controller("divController", divController)

【问题讨论】：

标签： javascript angularjs angularjs-scope listjs

【解决方案1】：

问题是当你的代码被调用时 DOM 没有完全加载。您可以通过执行以下操作来延迟它

mainController=function($scope){
    angular.element(document).ready(function () {
        var opts={valueNames: ['id'] } 
        $scope.theList=new List('theList', opts);
    });
}

【讨论】：

太好了，谢谢。出于好奇，我想知道为什么只有在将控制器添加到列表元素时才会出现错误
看起来像 {{}} 或 ng-click 之类的任何角码都有相同的效果。我的猜测是 Angular 可能正忙于重写 DOM 以插入它需要的内容，而 listjs 也在尝试使用它。