Anglejs의 뷰 모델 동기화 프로세스가 포함된 angle1 연구 노트

angularjs의 개인적인 이해 노트입니다. 다음은 모두가 볼 수 있도록 작성해 보겠습니다. # 🎜🎜## 🎜🎜# 프로젝트에서 발생한 작은 문제에서 비롯된 것입니다. 프로젝트에는 판매된 제품 수량을 입력하기 위한 입력 상자가 필요하며, 사용자가 입력한 후 입력된 데이터를 기준으로 처리 수수료가 계산됩니다. 당연히 ng-model과 ng-change를 사용했는데 대체적으로 문제는 없습니다. 문제는 입력 상자 아래에 모두 판매하는 버튼이 있다는 것입니다. 이 버튼을 클릭하면 프로그램이 자동으로 판매 금액을 설정합니다. 그러나 실제로 프로그램은 현재 처리 수수료를 계산하지 않습니다.

문제를 해결하고 설명서를 참조한 결과 ng-change에 문제가 있는 것으로 확인되었습니다. ng-change 프롬프트에 관한 Angular 공식 문서:

모델에서 값 변경이 발생할 때 표현식은 평가되지 않습니다.
ng-change의 소스 코드도 매우 간단합니다:

  var ngChangeDirective = valueFn({
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attr, ctrl) {
        ctrl.$viewChangeListeners.push(function() {
          scope.$eval(attr.ngChange);
        });
      }
    });

# 🎜🎜# 이를 통해 ng-change가 모델에 대한 뷰만 모니터링한다는 것도 알 수 있습니다. 따라서 js에서 ng-model의 변수를 직접 수정하면 ng-change가 트리거되지 않습니다.
문제가 발견되었으며 해결책은 어렵지 않습니다. ng-change를 포기하고 대신 $watch

을 사용하세요.
그런데 끝난건가요? 뷰가 변경되는 시점부터 모델에 동기적으로 업데이트되는 시점까지 변수는 정확히 어떤 과정을 거치나요? 반대의 경우도 마찬가지인가요? 그래서 ng-model의 소스코드를 다시 살펴보니 아무 것도 발견되지 않았지만, 뜻밖에도 ng-change는 모델 값이 변경되기 전에 실행된다는 사실을 알게 되었습니다. ng-model 소스 코드에 다음과 같은 함수가 있습니다:

function setupModelWatcher(ctrl) {
  // model -> value
  // !!!Note: we cannot use a normal scope.$watch as we want to detect the following:
  // !!!1. scope value is 'a'
  // !!! 2. user enters 'b'
  // !!!3. ng-change kicks in and reverts scope value to 'a'
  //    -> scope value did not change since the last digest as
  //       ng-change executes in apply phase
  // !!!4. view should be changed back to 'a'
  ctrl.$$scope.$watch(function ngModelWatch(scope) {
    var modelValue = ctrl.$$ngModelGet(scope);

    // if scope model value and ngModel value are out of sync
    // This cannot be moved to the action function, because it would not catch the
    // case where the model is changed in the ngChange function or the model setter
    if (modelValue !== ctrl.$modelValue &&
      // checks for NaN is needed to allow setting the model to NaN when there's an asyncValidator
      // eslint-disable-next-line no-self-compare
      (ctrl.$modelValue === ctrl.$modelValue || modelValue === modelValue)
    ) {
      ctrl.$$setModelValue(modelValue);
    }

    return modelValue;
  });
}

내부 주석은 ng-change 후에 변수 모델 값을 수정해야 하는 이유를 설명합니다. ng-change는 값을 변경할 가능성이 높기 때문입니다. 변수 값이 실제로 변경되지 않도록 다시 수정합니다. (API를 작성할 때는 모든 상황을 고려해야 합니다!!) 이 질문과 이전 질문에 대한 데모 코드는 다음과 같습니다. http://php.cn/course/47.html
소스 코드를 살펴봐도 얻을 수 있는 것이 없으므로 검색해 보세요. 온라인 기사. 이 과정에서 좋은 글을 발견했습니다. 이 글에서는

$formatters,$parsers,$render를 소개합니다. $setViewValue. 더 이상 여기서 소개하지 않겠습니다. 배워야 할 경우 원문은 여기 있습니다: http://php.cn/course/47.html

저도 $setViewValue 속이기 쉬운 점: $setViewValue를 호출할 때 매개변수가 참조 변수인 경우 참조 변수 주소가 변경되지 않은 경우 변수는 변경되지 않은 것으로 간주됩니다. var map = ['er ', 'tr']; 그러면 $setViewValue는 map.pop(); 이후에 지도 값이 변경되었다고 생각하지 않습니다. 이에 대한 자세한 내용은 이 질문에 대한 내 답변을 참조하세요. (자세한 내용을 알고 싶으시면 PHP 중국어 홈페이지 AngularJS Development Manual

을 참고하세요) #🎜🎜 ## 🎜🎜#ng-model에도 이 문제가 있는데, 이는 ng-model 소스 코드 주석에서 확인할 수 있습니다. $formatters,$parsers,$render以及$setViewValue。这里就不再介绍了，如果需要学习，原文在这里：http://php.cn/course/47.html

在学习$setViewValue时也发现一个很容易被坑的点：在调用$setViewValue时，如果参数是引用变量，那么如果引用变量地址没变，则这个变量被认为没有改变，如 var map = [‘er’, ’tr’];那么map.pop();之后$setViewValue并不认为map值改变了。关于这个具体可以看我对这个问题的回答。（想看更多就到PHP中文网AngularJS开发手册中学习）

ng-model也有这个问题，这个在ng-model源码注释中可以看到：

However, custom controls might also pass objects to this method. In
this case, we should make a copy of the object before passing it to
$setViewValue. This is because ngModel does not perform a deep
watch of objects, it only looks for a change of identity.

If you only change the property of the object then ngModel will not
realize that the object has changed and will not invoke the $parsers
and $validators pipelines.

从上面也可以看到其实一个变量的更新由view到model和model到view不止$formatters和$parsers管道，那么还有哪些呢？

在查了一圈资料后找到一个很清晰的解释：https://stackoverflow.com/que...，大家其实只需要看问题的回答，问题实在太长了。。。
这个回答中有个demo链接，我copy了一下并做了写小修改放在这个地址了：http://php.cn/course/47.html，这个demo很清晰的显示了变量更新的过程，细节就不再累述了，这里只把结果总结如下：
从model到view：
model值修改 ----> $formatters管道 ----> $render函数 ----> $validators ----> $watch函数

从view到model：
view值修改 ----> $setViewValue函数----> $parsers管道 ----> $validators ----> $viewChangeListener函数 ----> $watch函数
我们也可以直接调用$setViewValue函数去直接改变$viewValue 的值，流程会和上面一样。
注意在使用$setViewValue时一定要警惕参数是引用变量的情况，这个坑在上文也已经提到了。

本文没有具体介绍$formatters 和 $parsers

그러나 사용자 정의 컨트롤은 이 메서드에 개체를 전달할 수도 있습니다. #🎜🎜# 이 경우 객체를 #🎜🎜#$setViewValue에 전달하기 전에 복사본을 만들어야 합니다. 이는 ngModel이 딥#을 수행하지 않기 때문입니다. 🎜🎜#객체를 관찰하면 ID의 변화만 찾습니다.#🎜🎜#객체의 속성만 변경하면 ngModel은#🎜🎜#객체가 변경되었음을 인식하지 못하고 $parsers#🎜🎜#및 $validators 파이프라인.#🎜🎜#

#🎜🎜#위에서 변수가 실제로 뷰에서 업데이트되는 것을 볼 수도 있습니다. 모델로, 모델로 보기 $formatters 및 $parsers 파이프 외에도 무엇이 있을까요? #🎜🎜##🎜🎜#많은 정보를 확인한 결과 매우 명확한 설명을 찾았습니다: https://stackoverflow.com/que... 사실 질문에 대한 답변만 읽으면 됩니다. 너무 깁니다. . . #🎜🎜#이 답변에는 데모 링크가 있습니다. 이를 복사하고 약간 수정하여 http://php.cn/course/47.html에 넣었습니다. 이 데모에는 세부 사항이 명확하게 표시됩니다. 업데이트 프로세스는 반복되지 않습니다. 여기서는 다음과 같이 결과만 요약합니다. #🎜🎜#모델에서 뷰로: #🎜🎜#모델 값 수정----> ----> $render 함수----> $validators ----> $watch 함수#🎜 🎜 ##🎜🎜#뷰에서 모델로: #🎜🎜#view 값 수정----> $setViewValue 함수----> $parsers 파이프라인 - ---> $validators ----> $viewChangeListener함수----> $watch함수#🎜🎜 # $setViewValue 함수를 직접 호출하여 $viewValue 값을 직접 변경할 수도 있습니다. 프로세스는 위와 동일합니다. #🎜🎜# $setViewValue를 사용할 때 변수를 참조하는 매개변수에 주의해야 합니다. 이 함정은 위에서도 언급했습니다. #🎜🎜##🎜🎜#이 기사에서는 $formatters 및 $parsers 파이프라인을 구체적으로 소개하지 않습니다. 이 부분에 대해서는 기사에 제공된 링크를 참조할 수 있습니다. #🎜🎜#

알겠습니다. 이 기사는 여기서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 AngularJS 사용자 설명서를 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 Anglejs의 뷰 모델 동기화 프로세스가 포함된 angle1 연구 노트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!