무기한으로 호출되는 ngResource 메소드가있는 컨트롤러

Question

간단한 앱을 만들어 AngularJS를 배우기로 결심했습니다.

서버 측 응용 프로그램이 ExpressJs로 구축,하지만 자원 (/영화/: ID가) 아래에 사용된다 (찾을 수 없음) 그래서 (404)가 발생합니다이 URL을 가리키는 아직 구현되지 않은 오류 . 따라서 '/'만 사용하면됩니다.

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

app.factory("Movie", function ($resource) { 
    return $resource("/movie/:id"); 
}) 

app.controller("MovieCtrl", function($scope, Movie) { 
    $scope.test = function() { 
     Movie.query(); 
     return 42; 
    } 
}); 

그리고 내 템플릿 파일 :

가 나는 $ 자원 난이 간단한 테스트를 만든 그렇게 행동하는 방법을보고 싶어

<div ng-app="app"> 
    <div ng-controller="MovieCtrl"> 
     {{ test() }} 
    </div> 
</div> 

템플릿을 렌더링하고 예상대로를 '42'이다 제대로 표시되었지만 Chrome 개발자 도구에서 콘솔을 보면 다음과 같은 오류가 계속 표시됩니다 (또한 예상대로). 다음과 같은 오류가 표시됩니다 (예상과 마찬가지로).

GET http://localhost/movie 404 (Not Found) 

그러나이 메시지는 무한정 인쇄되어 절대적으로 실패한 후에도 내 영화 리소스가 /영화에 도달하는 것처럼 계속을 멈추지 않습니다.

미리 감사드립니다.

Answer 1

Movie.query()은 서버에서 응답을받은 후 $scope.$apply()을 호출하기 때문입니다.

매번 $scope.$apply()는 각도가 (다시 test를 호출하기 때문에 다시 Movie.query()를 호출) 아무것도가 변경되었는지 알아 더러운 검사를하지,라고합니다. 이로 인해 무한 루프가 발생합니다.

test()에서 Movie.query()으로 이동하면됩니다.

내가 내 자신을 명확하게하자 -이 의사 코드를 보면 걸릴 : 그래서 흐름이 따르고

var watches = ['$scope.test()']; 
var previous = {}; 
var values = {}; 

$rootScope.$apply = function(){ 
    previous = values; 
    values = {}; 
    var dirty = false; 
    for (var i =0;i<watches.length;i++){ 
     var expression = watches[i]; 
     values[expression] = value = eval(expression); 
     if(value!=previous)dirty=true; 
    } 
    if(dirty)$rootScope.$apply(); 
} 

Movie.query = function(){ 
    setTimeout(function(){ 
     $rootScope.$apply(); 
    },300); 
} 

$scope.test = function(){ 
    Movie.query(); 
    return 42; 
} 

:

1. $ scope.apply();
2. $ scope.test();
3. Movie.query(); ->setTimeout($scope.apply,100) (처음부터 다시);

등등 ..