angularJS 오류 $apply already in progress

angularJS의 $scope.$를 사용한 경우apply() 또는 $scope.$digest (), 다음과 같은 오류가 발생할 수 있습니다.

Error: [$rootScope:inprog] $apply already in progress  
http://errors.angularjs.org/1.3.13/$rootScope/inprog?p0=%24apply  
    at angular.js:63  
    at beginPhase (angular.js:14755)  
    at Scope.$apply (angular.js:14499)  
    at new  (1%20-%20%E5%89%AF%E6%9C%AC.html:10)  
    at Object.invoke (angular.js:4185)  
    at extend.instance (angular.js:8454)  
    at angular.js:7700  
    at forEach (angular.js:331)  
    at nodeLinkFn (angular.js:7699)  
    at compositeLinkFn (angular.js:7078)  

다음 코드는 위의 오류를 보고합니다.

var myModule = angular.module('myModule', []);    
myModule.controller("ctrl_1",function($scope){  
    $scope.value = "aty";  
    $scope.$apply();  
    //$scope.$digest();  
});  

이 오류는 사실 이해하기 쉽다. angularJS 프레임워크 자체가 더러운 데이터 검사를 하고 있기 때문에 $apply나 $digest를 수동으로 호출할 필요가 없다.여기에 자연스럽게 의문이 생겼다. 언제 $apply나 $digest를 수동으로 호출해야 하는지, 언제 필요하지 않은가?
현재 프로젝트에서 수동으로 $apply를 호출해야 하는 두 가지 상황만 표시할 수 있습니다.
상황1:controller에서 비동기적인 조작이 있다면, 예를 들어ajax 리셋,timeout 지연,dom 이벤트의 리셋 함수 등을 감청합니다.이렇게 이해할 수 있다. 비동기(지연)의 존재로 인해 리셋 함수를 실행하기 시작했을 때angularJS 자체controller의 더러운 값 검출이 끝났고 리셋 함수가 데이터의 변화를 검출할 수 없다.

var myModule = angular.module('myModule', []);    
myModule.controller("ctrl_1",function($scope){  
    $scope.text = "place";  
              
    setTimeout(function(){  
        $scope.text = "value setted after time out";  
        $scope.$apply();// ,   
    },1000);  

	
    var w = angular.element($window);
    w.bind('resize', function() {
        $rootScope.$apply();
    }); 
});   

이런 상황에 대해 js, jquery 원생 함수를 대체하기 위해angular의 내장 서비스 $timeout, $http를 사용하는 것을 권장합니다.
2. JQuery 코드에서 $scope의 데이터를 수정합니다.이 경우angular 프레임워크 밖에서 $scope의 데이터를 조작합니다.angular는 데이터 변화가 정상적임을 감지할 수 없습니다.

var myModule = angular.module('myModule', []);    
myModule.controller("ctrl_1",function($scope){  
    $scope.text = "place";  
});   
          
$(function(){  
    angular.bootstrap($("#div1")[0], ["myModule"]);   
  
    $("#btn").click(function(){  
         var $scope = $("#btn").scope();  
         $scope.text = "value setted in jquery";  
         $scope.$apply();  
    });           
})  

$apply()에는 두 가지 형식이 있습니다.
1. 하나의 function을 매개 변수로 받아들여 데이터 조작을 함수에 놓고 이 function을 실행하고 순환 데이터 검사를 터치합니다(추천):

$scope.getMessage = function(){
	setTimeout(function(){
		$scope.$apply(function(){
			$scope.message = "......"
		})
	},2000);
}

2. 매개 변수를 받아들이지 않고 한 바퀴 순환만 터치합니다.

$scope.getMessage = function(){
	setTimeout(function(){
		$scope.message = "......"
		$scope.$apply();
	},2000);
}

참고 내용은 다음과 같습니다.https://blog.csdn.net/aitangyong/article/details/48972643