2014-09-29 9 views
2

여기서 잘못하고있는 것에 대해 내 마음을 감싸고있는 것처럼 보일 수 없습니다. PHP 파일에서 json 데이터를 가져와 내 Angular app에 표시하려고합니다.AngularJS TypeError : null의 'insertBefore'속성을 읽을 수 없습니다.

내 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 
+0

확실한 데이터 스키마가 맞습니까? 성공 핸들러에 '데이터'값을 로그 아웃 했습니까? – badsyntax

+0

console.log 추가 (JSON.stringify ($ scope.rows)); 성공 핸들러로 json 콘텐츠를 콘솔에 올바르게 표시합니다. 그래서 아무 것도 없다면 $ scope.rows가 null이 아님을 알 수 있습니다. –

+0

동일한 오류가 있었지만 ng-include 지시어로 인해 발생 했으므로 코드에서 확인하십시오. – AlexandruC

답변

1

귀하의 스택 추적은 for-loop ("at forEach", "atEach.after"에서)를 실행하려고 할 때 무언가가 잘못되어 있다는 것을 암시합니다. 그리고 JQLite 함수에서 왔기 때문에 Angular 기반 루프라고합니다.

제공 한 코드를 살펴보면 해당 루프가보기에 ng-repeat라고 추측됩니다. 거의 확실하게 "컴퓨터"객체가 null이라는 것을 의미합니다.

badsyntax가 그의 코멘트에 자리하고 있습니다. 나는 "데이터"가 무엇인지보기 위해 성공 처리기에 일부 console.log를 추가 할 것이다. 로깅 또한 오류 처리기에서 약간 라이트 것 같습니다. http 호출이 성공적으로 완료되고 있다고 확신하십니까?

+0

console.log 추가 (JSON.stringify ($ scope.rows)); 성공 핸들러로 json 콘텐츠를 콘솔에 올바르게 표시합니다. 그래서 아무 것도 없다면 $ scope.rows가 null이 아님을 알 수 있습니다. –

+0

$ scope.rows에 실제 데이터가 들어 있습니까? 아니면 다른 "데이터"속성에 싸여 있습니까? –

+0

실제 데이터가 포함되어 있는지 확인하십시오. 아무것도 포장하지 마라. –

5

<tr>...</tr> 요소를 <div>...</div> 안에 배치하십시오.

각도의 소스 코드를 보면 일부 노드에 부모 노드가 없다는 불만이 있습니다.

실제로 내 코드에서 같은 오류를 수정하려고 할 때 귀하의 질문을 발견했습니다. 그것이 내가 한 일이며 효과가있었습니다.

+2

thx, ng-include 내부에서 동일한 오류가 발생했습니다. –

+0

감사합니다. @Ivan Rave, ui-view div 내에 ng-include에 대한 div가 있었으며 제안에 따라 동일한 오류가 발생했습니다. ng- div를 포함하고 문제를 해결했습니다. –

관련 문제