$ resource promise가 해결 될 때 $ scope를 업데이트하십시오.

Question

나는 $ angle을 정확하게 사용하는 방법을 고민하고 있습니다. 내 응용 프로그램은 기본 페이지를로드 할 때 서버에서받은 json 데이터의 URL 링크를 기반으로보기를 업데이트합니다.

컨트롤러는 버튼을 클릭 할 때 다음 데이터 파일을 가져 오지만이 데이터를 내 범위 변수에 삽입하고 뷰를 업데이트 할 수 없습니다. 네트워크가 데이터를 성공적으로 전송하므로 내 서비스가 작동합니다.

$ scope를 $ resource promise를 해결하고 데이터를 검색 할 때 앱이 초기화 된 후에 뷰를 업데이트하는 방법을 이해할 수 없습니다. 이 문제에 대한 도움을 주시면 감사하겠습니다.

내 ListController :

//View updates correctly when promise resolves 
$scope.data = DataElements.get({}); 

$scope.nextPage = function(){ //Called when clicking 'next' button 
var url = $scope.data.pager.nextPage; 

var pageNumber = url.split("page=").pop(); //Ugly but it is temporary, I promise.. 

//View doesnt update 
DataElements.get({'page': pageNumber}, function(data){ 
    $scope.data = data; 
}); 

//Error: Digest already in progress 
DataElements.get({'page': pageNumber }, function(data){ 
    $scope.$apply(function(){ 
     $scope.data = data; 
    }); 
}); 

//View doesnt update 
$scope.data = DataElements.get({'page': pageNumber)}; 

}; 

서비스 :

services.factory('DataElements', ['$rootScope','$resource', function($rootScope, $resource){ 
    return $resource($rootScope.baseUrl+'api/:endPointAdr.jsonp', 
     {'endPointAdr': 'dataElements', 'page': '@page'}, 
     { get : {'method' : 'JSONP', 'params' : {'callback' : 'JSON_CALLBACK'}}  
    }); 
}]); 

보기 :

<section> 
    <div> 
    <h1>Search</h1> 
    <input type="text" placeholder="Type something" autofocus> 
    <input type="button" name="filter" value="Filter"> 
    <input type="button" name="clear" value="Clear"> 
    <div class="btn-toolbar" role="toolbar" aria-label="..."> 
     <a class="btn btn-default" href="#" aria-label="Previous Page"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="btn btn-default" href="#" ng-click="nextPage()" aria-label="Next Page"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div> 
    </div> 
    <div ng-controller="ListController"> 
    <ul class="" ng-show="data"> 
     <li class="" ng-repeat="element in data.dataElements "> 
     <a href="#"> 
      <div class="info"> 
      <h2>{{element.name}}</h2> 
      </div> 
     </a> 
     </li> 
    </ul> 
    </div> 
</section> 

서버 응답 :

DataElements.get({}) == > 
angular.callbacks._1({"pager": {"page":1,"pageCount":15,"total":706,"nextPage":"http// ...});(*) 

DataElements.get({'page': 2}) == > 
angular.callbacks._2({"pager": {"page":2,"pageCount":15,"total":706,"nextPage":"http:// ...});(*) 

(*) $ 자원은 JSONP 스트립 만 JSON을 반환합니다.

업데이트 :

나는 단지 그것을 완벽하게 작동 nextPage 기능 범위에 $scope.data을 지정합니다. ng-click 지시문이 $scope.apply()에이 함수를 래핑하는 것을 알고 있습니다. 그런 다음 apply를 명시 적으로 호출하면 오류가 발생 함을 의미합니다.

해결책 :

<div ng-controller="ListController"> 다른 $ 범위와 중복 컨트롤러를 만들었습니다. 제거하면 문제가 해결되었습니다. 자세한 내용은 내 대답을 참조하십시오.

Answer 1

마침내 문제가 해결되었습니다.

이 <div ng-controller="ListController"> 지시어로 끓였습니다. 두 번째로 ListController을 만들고 $rootScope에 첨부했습니다. 바인딩에 문제가 없었지만 nextPage()이 다른 범위에서 호출되었습니다. 동적 ListController의 초기화 단계에서

, 두 컨트롤러가 작동하는 듯하지만 ng-click : nextPage()가 list.html보기에 할당 된 컨트롤러의 컨텍스트에서 실행되지 않은 호출 이유는, DataElements.get..을 실행합니다.

Answer 2

DataElements.get하면 반환 당신이 then 메서드를 호출 할 필요가 약속 개체 :

DataElements.get({'page': pageNumber}).then(function(data) { 
    $scope.data = data; 
}) 

하거나 $ 자원을 사용하고있는 경우 보통의 $promise 속성 개체를 반환 :

DataElements.get({'page': pageNumber}).$promise.then(function(data) { 
    $scope.data = data; 
}) 

Answer 3

로 귀하가 언급 한 바에 따르면 $scope에있는 데이터가 업데이트되고 있지만 변경 내용이보기로 전파되지 않았습니다. 뭔가 양방향 바인딩을 깨뜨리고 있습니다.

콘솔에서 어떤 종류의 오류가 발생하는지 확인합니다 (Chrome의 F12).

//Error: Digest already in progress 
DataElements.get({'page': pageNumber }, function(data){ 
    $scope.$apply(function(){ 
     $scope.data = data; 
    }); 
}); 

//View doesnt update 
$scope.data = DataElements.get({'page': pageNumber)}; 

않도록 명시 적으로 $apply를 사용하여, 그것은 거의 좋은 생각이 없습니다 :

이 코드 블록을 제거합니다.

편집 :

영업 이익이 지금처럼 $scope 혼동을 피하기 위해 ListController에 바인딩을 제거하여 자신의 문제는 HTML 코드가 조금 보이는 이상한 해결 있지만. 최적의 솔루션은 ListController에 바인드되는 지정 문을 작성한 다음이 지정 문을보기에서 재사용하는 것입니다. 그런 식으로 영업 이익은 앞으로도 $scope 문제를 피할 수 있습니다.