2014-03-28 6 views
0

피드를 읽는 기본 Angular 앱을 개발 중입니다.Ajax 호출로 각도 표현식 바인딩이있는 무한 루프

{{loadFeed()}} 

이는 부정사로 전환 :

나는 컨트롤러가 바로이 내가하려고하면

<button ng-click="loadFeed()">Load News</button> 

문제는이 버튼을 클릭있어하는 index.html을 값으로 반환 고리.

Controllers.js는 :

myApp.controller("FeedCtrl", ['$scope','FeedService', function ($scope,Feed) {  
$scope.feedSrc = "http://rss.cnn.com/rss/cnn_topstories.rss"; 

$scope.loadFeed=function(){   
    Feed.parseFeed($scope.feedSrc).then(function(res){ 
     $scope.feeds=res.data.responseData.feed.entries; 
    }); 

} 
}]); 

myApp.factory('FeedService',['$http',function($http){ 
return { 
    parseFeed : function(url){ 
     return $http.jsonp('//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=' + encodeURIComponent(url)); 
    } 
} 
}]); 

미안 해요, 난 AngularJS와 아주 새로운 오전. 다른 비슷한 주제를 보았지만 문제를 해결할 수 없습니다.

+0

loadFeed()가 아무 것도 반환하지 않을 수도 있습니다. 표시 할 내용이 없습니다. 아마 {{feeds}}를 넣고 컨트롤러에 $ scope.loadFeed()를 호출하여 데이터를 초기화하십시오. –

+0

답변 해 주셔서 감사합니다.하지만 미안합니다. 피드는 loadFeed 내부에만 채워져 있으므로 loadFeed를 호출하기 전에 호출 할 수 없습니다. $ scope.loadFeed()를 어디에서 호출할까요? – Pedro4441

+0

아마도 당신이 찾고있는 것이 ng-init입니까? {{loadFeed()}}를 수행하면 모든 다이제스트주기에 호출된다는 점에서 어떤 일이 벌어지며, 이는 당신을 놀라게 할 것입니다. 버튼의 ng-init = "loadFeed()"가 한 번 호출하면 {{피드}}가 채워집니다. –

답변

1

첫 번째 $ digest주기가 실행되면 {{loadFeed()}} 표현식이 평가됩니다. 이 함수는 $ http를 사용하는 parseFeed 함수를 호출합니다. 자, 여기에 문제의 이유가 있습니다. Angular가 $ http를 통해 아약스 요청에서 마지막으로 수행하는 작업은 $ rootScope. $ apply()으로 전화하는 것입니다. 이것은 다른 $ digest 사이클을 발생 시켜서, 여러분의 표현식이 다시 한번 평가되어 또 다른 $ rootScope. $ apply()를 트리거하고, 여기서 무한 루프가 진행되고 있음을 이미 볼 수 있습니다.

+0

설명 주셔서 대단히 감사합니다. 이것을 염두에두고, 나를 위해 일한 것은 잭 아가일이 말한 ng-init이었다. – Pedro4441