[angularjs] AngularJS : $ scope. $ apply ()를 호출 할 때 $ digest 오류가 이미 발생하지 않도록 방지

여기에 나오는 많은 답변에는 좋은 조언이 들어 있지만 혼란을 초래할 수도 있습니다. 간단하게 사용이 $timeout입니다 하지 최고의이나 적합한 솔루션. 또한 성능이나 확장 성이 염려되는 경우 반드시 읽어보십시오.

알아야 할 것들

• $$phase 프레임 워크에 대해 비공개이며 이에 대한 충분한 이유가 있습니다.

• $timeout(callback)현재 다이제스트 사이클 (있는 경우)이 완료 될 때까지 기다린 다음 콜백을 실행 한 다음 끝까지 실행합니다 $apply.

• $timeout(callback, delay, false)콜백을 실행하기 전에 선택적 지연과 함께 동일한 작업을 수행하지만 $applyAngular 모델 ($ scope)을 수정하지 않은 경우 성능을 저장 하는 (세 번째 인수)를 발생시키지 않습니다.

• $scope.$apply(callback)는 무엇보다도 호출합니다. $rootScope.$digest즉, 격리 된 범위 내에 있더라도 응용 프로그램 및 모든 해당 자식의 루트 범위를 다시 정의합니다.

• $scope.$digest()단순히 모델을 뷰에 동기화하지만 부모 범위를 소화하지 않으므로 HTML의 고립 된 부분을 고립 된 범위 (주로 지시문)로 작업 할 때 많은 성능을 저장할 수 있습니다. $ digest는 콜백을받지 않습니다 : 코드를 실행 한 다음 요약하십시오.

• $scope.$evalAsync(callback)angularjs 1.2와 함께 도입되었으며 아마도 대부분의 문제를 해결할 것입니다. 이에 대한 자세한 내용은 마지막 단락을 참조하십시오.

• 을 얻는다면 $digest already in progress error아키텍처가 잘못되었습니다. 스코프를 다시 지정할 필요가 없거나 담당하지 않아야합니다. (아래 참조).

코드를 구성하는 방법

해당 오류가 발생하면 스코프가 이미 진행중인 동안 스코프를 다이제스트하려고합니다.이 시점에서 스코프의 상태를 알 수 없으므로 해당 다이제스트를 처리 할 책임이 없습니다.

function editModel() {
  $scope.someVar = someVal;
  /* Do not apply your scope here since we don't know if that
     function is called synchronously from Angular or from an
     asynchronous code */
}

// Processed by Angular, for instance called by a ng-click directive
$scope.applyModelSynchronously = function() {
  // No need to digest
  editModel();
}

// Any kind of asynchronous code, for instance a server request
callServer(function() {
  /* That code is not watched nor digested by Angular, thus we
     can safely $apply it */
  $scope.$apply(editModel);
});

그리고 큰 Angular 응용 프로그램의 일부인 동안 격리 된 작은 지시문에서 수행중인 작업을 알고 있다면 성능을 절약하기 위해 $ apply 대신 $ digest를 선호 할 수 있습니다.

Angularjs 1.2 이후 업데이트

$ scope에 새롭고 강력한 방법이 추가되었습니다. $evalAsync . 기본적으로 현재 다이제스트 사이클이 발생하면 콜백을 실행합니다. 그렇지 않으면 새 다이제스트 사이클이 콜백을 실행하기 시작합니다.

$scope.$digestHTML의 분리 된 부분 만 동기화해야한다는 것을 실제로 알고 있다면 여전히 좋지는 않지만 ( $apply아무 것도 진행되지 않으면 새로운 것이 트리거 되기 때문에 ) 이것은 함수를 실행할 때 가장 좋은 솔루션입니다 어떤 동기 여부를 실행한다면 당신은 그것을 알 수 없다 때때로이 서버에 비동기 호출이 필요합니다 그렇지 않으면 자원이 동 기적으로 로컬로 가져온 것입니다 : 잠재적으로 캐시 된 자원을 가져 오는 한 후 예를 들어,.

이러한 경우 및 귀하가있는 다른 모든 경우, !$scope.$$phase사용하십시오$scope.$evalAsync( callback )

답변

function safeApply(scope, fn) {
    (scope.$$phase || scope.$root.$$phase) ? fn() : scope.$apply(fn);
}

$timeout(function() {
  // run my code safely here
})

.factory('myClass', [
  '$timeout',
  function($timeout) {

    var myClass = function() {};

    myClass.prototype.surprise = function() {
      // Do something suprising! :D
    };

    myClass.prototype.beAmazing = function() {
      // Here 'this' referes to the current instance of myClass

      $timeout(angular.bind(this, function() {
          // Run my code safely here and this is not undefined but
          // the same as outside of this anonymous function
          this.surprise();
       }));
    }

    return new myClass();

  }]
)

... your controller code...

$http.get('some/url', function(data){
    $scope.$apply(function(){
        $scope.mydate = data.mydata;
    });
});

... more of your controller code...

... your controller code...

$http.get('some/url', function(data){
    $timeout(function(){
        $scope.mydate = data.mydata;
    });
});

... more of your controller code...