angular1学习笔记，view model 的同步过程

Forelax 发布于2019-08-26 11:48 / 877人阅读

摘要：但实际上这时程序并没有计算手续费。经过排查并查阅文档之后，发现是的问题。本文没有具体介绍和管道，关于这部分可以参考文中给出的链接

事情起源于在项目中遇到的一个小问题：项目中需要一个输入框输入卖出产品数量，并且在用户输入后根据输入数据计算手续费。很自然的我用了ng-model和ng-change，并且一般情况下没什么问题。问题是：输入框下还有一个按钮是全部卖出，点击这个按钮程序会自动设置卖出额。但实际上这时程序并没有计算手续费。
经过排查并查阅文档之后，发现是ng-change的问题。Angular关于ng-change的官方文档的提示是：
The expression is not evaluated when the value change is coming from the model.
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只做了view到model的监听。所以当我们直接在js中修改ng-model的变量时并不会触发ng-change。
问题找到了，解决方案也不难，放弃ng-change，改用$watch就行了。
但是就这么结束了吗？一个变量从view变化开始到同步更新到model到底经历了什么呢？反过来呢，是一样的吗？
所以我又去看了看ng-model的源码，并没有什么收获，不过意外的了解到了这么个点：
ng-change是在model值变化之前执行的。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;
  });
}

里面的注释解释了为什么变量model值的修改要在ng-change之后，因为ng-change中很可能会把变量的值又修改回去，这样变量值事实上就并没改变（写api真的是什么情况都要考虑到啊！！）。关于这一点，以及前面的问题这里有一个demo代码：http://runjs.cn/code/wnmdzvwg

既然看源码没什么收获，那么就去网上搜搜文章看看吧。这个过程中找到一篇很好的文章，这篇文章介绍了

$formatters,$parsers,$render以及$setViewValue。这里就不再介绍了，如果需要学习，原文在这里：http://blog.csdn.net/qq_17371...

在学习$setViewValue时也发现一个很容易被坑的点：在调用$setViewValue时，如果参数是引用变量，那么如果引用变量地址没变，则这个变量被认为没有改变，如 var map = [‘er’, ’tr’];那么map.pop();之后$setViewValue并不认为map值改变了。关于这个具体可以看我对这个问题的回答。顺便也附上demo代码：http://runjs.cn/code/cm7d3pcf
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://runjs.cn/code/qte0mm49，这个demo很清晰的显示了变量更新的过程，细节就不再累述了，这里只把结果总结如下：
从model到view：
model值修改 ----> $formatters管道 ----> $render函数 ----> $validators ----> $watch函数

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

本文没有具体介绍$formatters 和 $parsers 管道，关于这部分可以参考文中给出的链接

GPU云服务器云服务器 model view Model-View-Controller 深度学习的过程机器学习的过程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107586.html

MVC MVP MVVM

摘要：，的事件回调函数中调用的操作方法。以为例调用关系模式实际就是将中的改名为，调用过程基本一致，最大的改良是间的双向绑定。和间，有一个对象，可以操作修改，使用。参考：MVC，MVP 和 MVVM 的图示 - 阮一峰http://www.ruanyifeng.com/blo...Web开发的MVVM模式http://www.cnblogs.com/dxy198...界面之下：还原真实的MV...

wushuiyong 2019-08-02 15:58 评论0 收藏0
MVC MVP MVVM

摘要：，的事件回调函数中调用的操作方法。以为例调用关系模式实际就是将中的改名为，调用过程基本一致，最大的改良是间的双向绑定。和间，有一个对象，可以操作修改，使用。参考：MVC，MVP 和 MVVM 的图示 - 阮一峰http://www.ruanyifeng.com/blo...Web开发的MVVM模式http://www.cnblogs.com/dxy198...界面之下：还原真实的MV...

Tangpj 2019-08-21 12:02 评论0 收藏0
Angular1.x中ngModel的$render的详解

摘要：我们下面来看看的源码这是其中一个，在不同的指令下的代码都不太一样，但是其作用基本一致，但是从这里我们就可以看出的到底在干什么事了。这篇文章是我两年前在博客园写的,现在移植过来,不过Angular 1.x 在国内用的人已经不多了,希望能帮助到有需要的人在我开始着手 ngModel 的领域时候，有一个问题很令我纠结，那就是 $render 到底是做什么的呢？查了很多资料都只是简单的描述...

Euphoria 2019-08-22 14:50 评论0 收藏0
Backbone.js学习笔记（一）

摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...

FrancisSoung 2019-08-21 10:21 评论0 收藏0
angular2学习笔记之基本组件和ngFor

摘要：的思想非常先进，摒弃了那种复杂的构建模式，采用了组件化开方的方，那我们一起来看一看，一个基础的组件是什么样子的呢。 angular2的思想非常先进，摒弃了angular1那种复杂的构建模式，采用了组件化开方的方，那我们一起来看一看，一个基础的组件是什么样子的呢。angular2-demoshowImg(http://static.xiaomo.info/images/angular.p...

wawor4827 2019-08-19 18:39 评论0 收藏0