加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 08:25:17 所属栏目:安全 来源:网络整理
导读:事情起源于在项目中遇到的一个小问题:项目中需要一个输入框输入卖出产品数量,并且在用户输入后根据输入数据计算手续费。很自然的我用了ng-model和ng-change,并且一般情况下没什么问题。问题是:输入框下还有一个按钮是全部卖出,点击这个按钮程序会自动设

事情起源于在项目中遇到的一个小问题:项目中需要一个输入框输入卖出产品数量,并且在用户输入后根据输入数据计算手续费。很自然的我用了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 管道,关于这部分可以参考文中给出的链接

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读