AngularJS TypeError：无法读取 null 的属性“insertBefore”答案

【问题标题】：AngularJS TypeError: Cannot read property 'insertBefore' of nullAngularJS TypeError：无法读取 null 的属性“insertBefore”
【发布时间】：2014-09-29 15:13:11
【问题描述】：

我似乎无法思考我在这里做错了什么。我正在尝试从 php 文件中提取 json 数据，然后将其显示在我的 Angular 应用程序中。

我的 app.js：

var app = angular.module("MyApp", []);

app.controller("ClientHealthCtrl", function($scope, $http) {
    $http.get('json.php').
        success(function(data, status, headers, config) {
            $scope.rows = data;
    }).
    error(function(data, status, headers, config) {
        // log error
    });
});

我的 HTML：

<body class="skin-black" ng-app="MyApp">
...
<tbody ng-controller="ClientHealthCtrl">
  <tr class="link_back" ng-repeat="Computer in rows">
    <td><a href="#cid={{Computer.id}}">{{Computer.ComputerName}}</a></td>
    <td><i class="fa fa-fw fa-check-square" style="color:#008000;"></i>{{Computer.WmiTest}}</td>
    <td><i class="fa fa-fw fa-check-square" style="color:#008000;"></i>{{Computer.SmsClientService}}</td>
    <td><i class="fa fa-fw fa-check-square" style="color:#008000;"></i>{{Computer.McAfeeFrameworkService}}</td>
    <td><i class="fa fa-fw fa-check-square" style="color:#008000;"></i>{{Computer.RemoteManagement}}</td>
  </tr>
</tbody>

这会导致...

TypeError: Cannot read property 'insertBefore' of null
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:2067:13
    at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:113:18)
    at forEach.after (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:2066:5)
    at Object.JQLite.(anonymous function) [as after] (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:2104:17)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:13294:22
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3745:29
    at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:13293:13)
    at Object.Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:7693:38)
    at Object.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:7894:24)
    at done (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:8883:20) 
    enter code here

【问题讨论】：

您确定数据架构符合您的预期吗？您是否在成功处理程序中注销了“数据”的值？
添加console.log(JSON.stringify($scope.rows));成功处理程序在控制台中正确显示 json 内容。所以如果没有别的我知道 $scope.rows 不为空。
我遇到了同样的错误，但发现它是由 ng-include 指令引起的，所以请确保在代码中检查它。

标签： angularjs

【解决方案1】：

尝试将<tr>...</tr> 元素包装在<div>...</div> 中。

查看 Angular 的源代码，它在抱怨某些节点没有父节点。

实际上，我在寻找修复代码中的相同错误时发现了您的问题。这就是我所做的，并且奏效了。

【讨论】：

感谢@Ivan Rave，我在 ui-view div 中有一个用于 ng-include 的 div，并且遇到了同样的错误，根据您的建议为 ng-include div 添加了包装器 div，它解决了问题

【解决方案2】：

您的堆栈跟踪表明当它尝试执行 for 循环（“at forEach”、“at forEach.after”）时出现问题，并且由于它来自 JQLite 函数，我会说它是基于 Angular 的循环.

查看您提供的代码，我猜测有问题的循环是您认为的 ng-repeat。这几乎可以肯定意味着您的“计算机”对象为空。

badsyntax 与他的评论一致。我会在成功处理程序中添加一些 console.logs 以查看“数据”是什么。在错误处理程序中，您的日志记录似乎也有点少。您确定 http 调用成功完成了吗？

【讨论】：

添加console.log(JSON.stringify($scope.rows));成功处理程序在控制台中正确显示 json 内容。所以如果没有别的我知道 $scope.rows 不为空。
$scope.rows 是否包含实际数据？还是包裹在另一个“数据”属性中？
很确定它包含实际数据。不将其包裹在任何东西中。