Angle.js에서 양방향 바인딩을 구현하는 방법에 대한 간략한 설명 $watch $digest $apply_AngularJS

Angular.js의 기능, 양방향 바인딩

뷰의 변경 사항을 데이터에 직접 반영할 수 있는 마법 같은 기능이 있을까요? 데이터의 변경 사항이 실시간으로 뷰에 통보됩니다.

이는 다음과 같은 3가지 중요한 범위 지정 방법 덕분입니다.

$watch
$다이제스트
$신청

어떤 차이점이 있나요?

$watch
스코프의 데이터를 듣는 리스너입니다

방법 설명:

$scope.$watch('参数',function(newValue,oldValue){
 //逻辑处理
})

위에서 리스너를 생성했습니다.
'Parameter'는 $scope 객체 아래의 객체(또는 객체의 속성)입니다.

$scope.name 속성을 모니터링한다고 가정해 보겠습니다.

$scope.$watch('name',function(newValue,oldValue){
 //逻辑处理
})

위 코드와 마찬가지로 'name'에는 따옴표가 필요합니다

매개변수 뒤에는 콜백 함수가 옵니다. 콜백 함수 매개변수는 모니터링된 속성, 변경 후의 새 값, 이전 변경 전의 이전 값을 반환합니다.

$다이제스트

스코프 내 데이터가 변경되었는지 확인하는 역할을 담당하며 특정 속성이 변경되면 즉시 이 속성을 리스너($watch에 등록된 리스너)에게 알리고 리스너를 트리거한 후 콜백 함수를 실행합니다. .

$신청

이 방법은 $digest와 매우 유사하며 $digest는 범위 내의 모든 데이터를 확인합니다
$apply는 rootScope의 모든 데이터를 확인하는 것과 동일하며 상위에서 하위로의 모든 데이터를 확인합니다

$apply() == $rootScope.$digest()

$apply() 메소드에는 두 가지 형태가 있습니다.

첫 번째는 함수를 매개변수로 허용합니다.
이는 $digest 함수를 트리거하고 매개변수의

두 번째 유형은 매개변수를 허용하지 않습니다.
이는 $digest 부모-자식 주기를 촉발합니다

Angular.js에서는 $digest를 직접 호출하지 않고 대신 $scope.$apply()를 사용합니다

모니터를 설정하지 않았는데 왜 뷰와 데이터가 양방향으로 묶일 수 있습니까

예를 들어 텍스트 상자 ng-model="name"
이때 실제로 $scope 객체 아래에는 위 뷰와의 양방향 바인딩에 해당하는 속성 이름이 있습니다

어떻게 달성할 수 있나요?

실제로 ng-model="name", ng-bind="name" 또는 {{name}}을 정의할 때
이때 angle.js는 $scope 모델의 "name" 속성에 대한 리스너를 자동으로 설정합니다.

$scope.$watch('name', function(newValue, oldValue) {
  //监听 name 属性的变化
});

angular.js는 자동으로 리스너를 생성하는 데 도움이 되므로 이 속성과 $scope.name 데이터는 실시간으로 양방향 바인딩됩니다.

물론 데이터가 변경된 것을 발견할 수도 있습니다. 그러나 UI가 새로 고쳐지지 않습니다.

아니요

$scope 모델이 다이제스트 루프를 통과할 때 데이터가 아직 반환되지 않았을 뿐입니다.

예를 들어 메소드를 비동기적으로 호출할 때 콜백에서 반환된 데이터는
예를 들어 setTimeout에서 예약된 트리거 함수를 설정한 다음 모델 데이터를 수정합니다.
즉, $scope 모델의 다이제스트 주기가 누락되어 모델이 새 데이터에 따라 새로 고쳐지도록 UI에 알리지 않게 되었습니다.

그런 문제가 발생하면 어떻게 해야 하나요?

양방향 바인딩을 달성하기 위해 루프의 데이터를 확인하려면 다이제스트를 수동으로 호출해야 합니다

위에서 말했듯이 일반적으로 다이제스트 메소드를 직접 호출하지 않고 $apply 메소드를 수동으로 호출하여 $digest 루프를 간접적으로 트리거합니다.

다음과 같습니다.

setTimeout(function() {
 $scope.name= '一介布衣';
 $scope.$apply();
}, 2000);

문제는 여기에 있습니다. 이제 적용 메소드를 수동으로 호출해야 합니다

지금까지angular.js는 일부 지시문과 서비스에 대해 $apply() 메서드를 자동으로 구현했습니다.

예: ng-click, ng-model, $timeout 서비스, $http 서비스 등

호출 후,angular.js는 자동으로 $apply()를 호출하여 양방향 데이터 바인딩을 구현합니다.