Angular js에서 서비스 전화를 걸 때보기가 업데이트되지 않습니다

Question

안녕하세요 저는 Angular js에서 500 서비스 콜을하고 있습니다.

내보기는 다음과 같습니다 :

<div> 
     <span>{{countIs}} 
</div> 

MyController에는 각 내가 업데이 트 뷰를 만들 필요가 전화

var myCount =0; 

    myArry.forEach(function(item){ 
     if(item.id){ 
      myService.serviceCall(function(data){ 
        myCount = myCount+1; 
        $scope.countIs = myCount; 
       }) 
    } 
}) 

내 문제가 "countIs" 변수보기를 업데이트하지 않는 것입니다. 아무도 나를 도울 수 있습니까?

감사 사전.

Answer 1

귀하의 서비스가 Angular의 내장형 $http을 사용하지 않는 것 같습니다 - 맞습니까? 괜찮습니다. 이것은 앵귤러 작업을 위해 구축되지 않은 모든 서비스입니다. 그러나이 또한 비동기 작업이 완료되면 각도가 모르는 것을 의미하고, 그래서 당신은 $scope.$apply()와 다이제스트를 강제해야

myArry.forEach(function(item){ 
    if(item.id){ 
     myService.serviceCall(function(data){ 
      myCount = myCount+1; 
      $scope.countIs = myCount; 
      $scope.$apply(); 
     }) 
    } 
} 

주제 끄기 : 측면 메모에서, HTTP 요청의 수백입니다 만들기 나쁜 디자인. 우선, 네트워크 대기 시간으로 인해 속도가 느립니다 (브라우저는 동일한 출처로 N 개의 연속 요청 만 허용합니다. 모바일 브라우저 N = 1, AFAIK). 둘째, HTTP 연결을 열고 닫고 (각 요청을 잠재적으로 인증해야하는) 서버에 불필요한 오버로드가 발생합니다.

대신 모든 정보를 한 번에 묻는 단일 요청을 만드십시오.

Answer 2

아래의 데모를 참조하십시오.

내 조언은 사용 angular.forEach 대신 Array.prototype.forEach()

하고 당신이 그들에 액세스하기 전에 모든 변수를 선언 있는지 확인합니다.

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

 
app.controller('homeCtrl', function($scope, myService) { 
 

 
    var myArray = [1, 2, 3, 4, 5]; 
 

 
    console.log(myService); 
 

 
    $scope.countIs = 0; 
 
    var myCount = 0; 
 

 
    angular.forEach(myArray, function(item) { 
 
    if (item) { 
 
     myService.serviceCall().then(function(data) { 
 
     myCount = myCount + 1; 
 
     $scope.countIs = myCount; 
 
     }); 
 
    } 
 

 

 

 
    }); 
 
}); 
 

 
app.service('myService', function($http) { 
 

 

 
    this.serviceCall = function() { 
 

 

 
    return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json'); 
 

 
    }; 
 

 
    return this; 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 
    <div ng-controller="homeCtrl"> 
 
    {{countIs}} 
 

 
    </div> 
 
</div>