ngModel 值不更新/显示

angular中的$scope是页面(view)和数据(model)之间的桥梁,它链接了页面元素和model,也是angular双向绑定机制的核心。

而ngModel是angular用来处理表单(form)的最重要的指令,它链接了页面表单中的可交互元素和位于$scope之上的model,它会自动把ngModel所指向的model值渲染到form表单的可交互元素上,同时也会根据用户在form表单的输入或交互来更新此model值。

在源码中,model值的格式化、解析、验证都是由ngModel指令所对应的控制器ngModelController来实现的。

在笔者所维护的国内ng群中,经常被问到一个问题:

    为什么我的ng-model=“xxx”值不能在页面显示了呢?

对于ngModel的这类问题主要分为两类:

  • model值不满足表单验证条件,所以angular不会渲染它
  • 由于JavaScript特殊的原型链继承机制,对$scope中属性的赋值并不能更新到父$scope

在本节中,我们将会详细分析此类问题,借此深入剖析ngModel的工作原理。

验证引起的model值不显示

我们先来看一个修改商品数量的例子,要求为必须输入1-100的个数;

下面是对应的html代码:

<body class="container"><div ng-controller="DemoCtrl as demo"><div ng-form="form" class="form-horizontal"><div class="form-group" ng-class="{'has-error': form.amount.$invalid }"><label for="amount">Amount</label><!-- 这个input将工作不正常 --><input id="amount" name="amount" type="number" ng-model="demo.amount" class="form-control" placeholder="1 - 100" min="1" max="100"/></div></div></div>
</body>

javascript代码:

angular.module("com.ngbook.demo", []).controller("DemoCtrl", [function(){var vm = this;vm.amount = 0;return vm;
}]);

在代码中我们已经为ngModel变量amount赋值了整数“0”,可是界面显示效果仍然显示”1 – 100”的placeholder(如下图)。

ng-model绑定值不改变:验证

下面是关于angular number组件ngModel转换函数代码:

var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/;function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {textInputType(scope, element, attr, ctrl, $sniffer, $browser);ctrl.$parsers.push(function(value) {var empty = ctrl.$isEmpty(value);if (empty || NUMBER_REGEXP.test(value)) {ctrl.$setValidity('number', true);return value === '' ? null : (empty ? value : parseFloat(value));} else {ctrl.$setValidity('number', false);return undefined;}});addNativeHtml5Validators(ctrl, 'number', numberBadFlags, null, ctrl.$$validityState);ctrl.$formatters.push(function(value) {return ctrl.$isEmpty(value) ? '' : '' + value;});if (attr.min) {var minValidator = function(value) {var min = parseFloat(attr.min);return validate(ctrl, 'min', ctrl.$isEmpty(value) || value >= min, value);};ctrl.$parsers.push(minValidator);ctrl.$formatters.push(minValidator);}if (attr.max) {var maxValidator = function(value) {var max = parseFloat(attr.max);return validate(ctrl, 'max', ctrl.$isEmpty(value) || value <= max, value);};ctrl.$parsers.push(maxValidator);ctrl.$formatters.push(maxValidator);}ctrl.$formatters.push(function(value) {return validate(ctrl, 'number', ctrl.$isEmpty(value) || isNumber(value), value);});
}

ngModel作为angular双向绑定中的重要组成部分,负责view控件交互数据到$scope上model的同步。当然这里存在一些差异,view上的显示和输入都是字符串类型,而在model上的数据则是有特定类型的,如常用的int、float、Date、Array、Object等。ngModel为了实现数据到model的类型转换,在ngModelController中提供了两个管道数组$formatters和$parsers,它们分别是将model的数据转换为view交互控件显示的值和将交互控件得到的view值转换为model数据,它们都是一个数组对象,在ngModel启动数据转换时,会以UNIX管道式传递执行这一些列的转换。我们也可以手动的添加$formatters和$parsers的转换函数(unshift、push),当然在这里也是做数据验证的最佳时机,能够转换意味应该是合法的数据。

在number组件代码中,我们清晰看见:依次添加了对数字验证转换、最小值合法性验证、最大值合法验证。首先会启动$parsers转换,如果在转换过程中出现不合法验证则会设置ngModelController.$setValidity验证错误,则返回undefined。对于model数据到交互控件显示,同样也会经过$formatters转换管道,对于没有通过验证的逻辑,同样也会ngModelController.$setValidity设置验证错误,返回undefined,因此这不合法的model数据不会显示在交互控件上。

原型链继承问题

JavaScript中每个对象都会链接到一个原型对象,并且他可以从中继承属性。即使通过字面量创建的对象也会链接到Object.prototype,它是JavaScript中的标配对象。JavaScript的原型链继承相对于其他语言常见的继承,是一种另类的继承,它是实施于对象上的动态继承方式,而非常见的实施与类型class之上的静态继承体系。JavaScript的这种继承方式很灵活,一个对象可以被多个对象继承,而且他们共享同一实例对象,但理解起来显得格外复杂,从JavaScript原型和原型链可以看出它的复杂性。在Javascript中,每个函数都有一个原型属性prototype指向自身的原型,而由这个函数创建的对象也有一个proto属性指向这个原型,而函数的原型是一个对象,所以这个对象也会有一个proto指向自己的原型,这样逐层深入直到Object对象的原型,这样就形成了原型链。下面的是JavaScript原型继承基础原型和原型链展示图。

javascript-原型继承

函数是由Function函数创建的对象,因此函数也有一个proto属性指向Function函数的原型。需要注意的是,真正形成原型链的是每个对象的proto属性,而不是函数的prototype属性。更多的内容关于原型和原型链的知识,请参考《Javascript模式》这本书。

JavaScript的原型链连接只在属性检索的时候才会启用,如果我们尝试去获取对象的某个属性值,但该对象没有此属性名,则JavaScript会试着从原型对象中获取该属性值。如果那个对象也没有该属性名,那么在继续从它的原型中寻找,依次类推,直到Object.prototype,如果仍然没有找到该属性值,则返回结果为undefined。不幸的是,这种原型链连接检索,只会在属性检索的的时候启用,并不会在更新属性值时启用,因此当我们对于基础类型(非引用对象上的属性,换句通俗的话来说,就是不会出现“.”运算符)的属性更新的时候,它并不能更新父对象的属性,替代方式是在自身对象上创建了该属性。这也是angular中对于基础类型的属性,不能在子controller中被修改的原因,导致在子controller中ngModel的更新并不会反应在父controller上。

下边是关于该问题的一个简化例子:

HTML:

<div ng-controller="ParentCtrl"><div class="form-group"><h4>Parent Controller:</h4><pre></pre><input type="text" ng-model="greet" class="form-control" /></div><div ng-controller="ChildCtrl"><div class="form-group"><h4>Child controller:</h4><pre></pre><input type="text" ng-model="greet" class="form-control" /></div></div>
</div>

JavaScript:

angular.module("com.ngbook.demo", []).controller("ParentCtrl", ["$scope", function($scope) {$scope.greet = "hello angular!";}]).controller("ChildCtrl", angular.noop);

从初始化显示效果中,我们能看出子$scope之继承了来自父$scope的greet属性,都显示为”hello angular!“。如果我们尝试利用父controller提供了input控件改变父$scope的greet属性,你也能看见子controller区域的显示也会被及时更新。对于ngController默认会使用原型链继承其父对象的属性,所有的$scope的根$scope或称祖$scope是来自ngApp节点创建的$rootScope,换句话说,$rootScope是万物之源,所有的$scope都直接或者间接继承至它。

ngModel-controller继承

当我们尝试去改变输入框的greet属性的时,则发生了下面的情况:子controller区域发生了更新,父controller区域却无法更新。因为上面所说的JavaScript的原型链检索并不对更新启用,对于基础类型JavaScript在自身对象(这里是子$scope)上创建了一个同名的变量。你也想可以从下面angular调试插件batarang截图中看出来。一旦利用子controller的input控件修改了greet属性,再次之后我再次尝试修改父controller区域的greet属性,子controller区别不会在像初始化时候那样及时同步了,它们之间完全独立了,各自拥有了自己的greet属性。

ngModel-controller继承

batarang插件截图

ngModel-controller继承

经过上面的例子分析,相信作为读者的你已经能够理解这类由于继承链引用问题导致的ngModel不能更新问题了,请记住:这是JavaScript原型继承的issue,并不是angular的issue。

那么我们在子controller中如何更新父controller的属性值呢?这个问题已经很简单了,issue的问题在于没有启用原型链的检索,那么如果我们将ngModel的属性变为引用对象,换句话说:在ngModel的属性值中加了“.”,那么在JavaScript的原型链检索就会启动了。

HTML:

<div ng-controller="ParentCtrl"><div class="form-group"><h4>Parent Controller:</h4><pre></pre><input type="text" ng-model="vm.greet" class="form-control" /></div><div ng-controller="ChildCtrl"><div class="form-group"><h4>Child controller:</h4><pre></pre><input type="text" ng-model="vm.greet" class="form-control" /></div></div>
</div>

JavaScript:

angular.module("com.ngbook.demo", []).controller("ParentCtrl", ["$scope", function($scope) {$scope.vm = {greet: "hello angular!"};}]).controller("ChildCtrl", angular.noop);

jsbin demo: http://jsbin.com/metufi/1/edit?html,js,output

这里在ngModel属性值多引入了“vm”变量,这个时候,不管我们尝试修改greet值,整个页面都会得到相应的同步。关于这个问题,作者更推荐使用angular 1.2后的controller as vm的方式解决,更多的信息请阅读《使用controller as vm方式.md》一节。



本文转自破狼博客园博客,原文链接:http://www.cnblogs.com/whitewolf/p/ngmodel-zhi-bu-geng-xin-slash-xian-shi.html,如需转载请自行联系原作者

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/291727.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux c之使用pthread_create创建线程pthread_join等待线程和pthread_exit终止线程总结

1、介绍API 1、pthread_create函数 函数简介 pthread_create是UNIX环境创建线程函数 头文件 #include<pthread.h> 函数声明 int pthread_create(pthread_t *restrict tidp,const pthread_attr_t *restrict_attr,void*(*start_rtn)(void*),void *restrict arg); 返回值…

postgresql 修改字段名称

1 ALTER TABLE auth_user RENAME email TO aemail; 转载于:https://www.cnblogs.com/tk091/p/4331324.html

go获取项目内所有proto_gRPC学习之三:初试GO版gRPC开发

欢迎访问我的GitHubhttps://github.com/zq2599/blog_demos内容&#xff1a;所有原创文章分类和汇总&#xff0c;及配套源码&#xff0c;涉及Java、Docker、Kubernetes、DevOPS等&#xff1b;本篇概览本文《gRPC学习》系列的第三篇&#xff0c;前文已准备好gRPC开发环境&#xf…

服务端架构中的“网关服务器”

这么一个场景&#xff1a;一个要承载高并发、具有高性能的后台服务&#xff0c;往往会有多个不同的应用服务。问题来了&#xff0c;你会怎样设计架构呢&#xff1f;如下图所示&#xff0c;为了共用一个稳定高效的网络处理功能&#xff0c;把所有服务写在一个进程里。接下来悲剧…

一起来庆祝 .NET 20 周年!

你知道吗&#xff1f;.NET 将要迎来 20 周年, 在 20 年前的 2002 年, 微软公布了下一代的软件、服务的愿景和路线&#xff0c;2 月 13 日&#xff0c;Visual Studio .NET 推出&#xff0c;.NET 开发平台的第一个版本正式向世界发布。而现在, .NET 6 成为统一的开发平台&#xf…

Python pip 国内镜像大全及使用办法

最近写了一篇关于“微软开源分布式高性能GB框架LightGBM安装使用”的文章&#xff0c;有小伙伴安装python环境遇到了问题。我个人也尝试安装了一下&#xff0c;确实遇到了很多问题。最关键的一个就是使用pip安装时&#xff0c;“https://pypi.python.org/simple/scipy/”访问不…

linux c之c语言符合标准的头文件和linux常用头文件

1.C语言符合标准的头文件 #include <assert.h> //设定插入点 #include <ctype.h> //字符处理 #include <errno.h> //定义错误码 #include <float.h> //浮点数处理 #include <fstream.h> //文件输入&#xff0f;输出 #include <iomanip.h…

为什么一点onclick按钮就提交表单?

下面是一个表单&#xff0c;有一个onclick按钮&#xff0c;点击后上面文本框的内容被添加到下面的文本域中&#xff0c;并可以一直添加&#xff0c;然后点击submit后提交到另一个页面。但是&#xff0c;在Ie9或者火狐浏览器中我一点onclick为什么总是提交表单&#xff0c;在搜狗…

不固定图片宽高瀑布流_APP设计学习:瀑布流式的产品UI设计

看到好的APP产品UI设计&#xff0c;真是忍不住想要停留几秒&#xff0c;慢慢来欣赏。今天学堂君收集了近期不错的优质的APP设计作品&#xff0c;看起来极舒服的UI界面&#xff0c;分享给大家。这一期的重点学习&#xff1a;在APP界面设计当中&#xff0c;如何应用瀑布流式的布局…

虚拟现实大潮渐近:Oculus VR、EA和Avegant等多家公司...

虚拟现实不是新词&#xff0c;上世纪的许多科幻小说中就描述过未来虚拟现实技术高度发达后的世界&#xff0c;但是这两年&#xff0c;虚拟现实真正在商业市场有了新的突破&#xff0c;代表者就是Oculus VR。近日&#xff0c;一众在虚拟现实领域有所建树的公司结成了“沉浸式技术…

【Blog.Core开源】网关自定义认证鉴权与传参

书接上文&#xff0c;上回咱们说到了《【Blog.Core开源】网关统一集成下游服务文档》&#xff0c;已经将多个下游服务统一集成到了网关里&#xff0c;并且也把接口文档Swagger给集成了&#xff0c;那今天就说一下认证和鉴权相关的话题。继续说下故事背景在平时开发的时候&#…

linux网络编程之inet_pton和inet_ntop函数

Linux下这2个IP地址转换函数,可以在将IP地址在“点分十进制”和“整数”之间转换 而且,inet_pton和inet_ntop这2个函数能够处理ipv4和ipv6。算是比较新的函数了。 1、inet_pton函数原型如下[将“点分十进制” -> “整数”] #include <sys/types.h>#include <sys…

私活利器,docker快速部署node.js应用

http://cnodejs.org/topic/53f494d9bbdaa79d519c9a4a 最近研究了几天docker的快速部署&#xff0c;感觉很有新意&#xff0c;非常轻量级和方便&#xff0c;打算在公司推广一下&#xff0c;解放运维&#xff0c;省得每次部署一台新服务器都去跑安装脚本了&#xff0c;对于我们开…

HDFS HA与QJM(Quorum Journal Manager)介绍及官网内容整理

问题导读1.HDFS HA与QJM解决了什么问题&#xff1f; 2.HDFS HA与QJM区别是什么&#xff1f; 3.在HA&#xff08;两个namenode&#xff09;架构下&#xff0c;如何访问hdfs文件&#xff1f;【使用QJM构建HDFS HA架构(2.2)】本文主要介绍HDFS HA特性&#xff0c;以及如何使用QJM(…

#时间预测算法_【时间序列】时序预测竞赛之异常检测算法综述

本文将介绍在时间序列预测相关问题中常见的异常检测算法&#xff0c;可以很大程度上帮助改善最终预测效果。异常分类时间序列的异常检测问题通常表示为相对于某些标准信号或常见信号的离群点。虽然有很多的异常类型&#xff0c;但是我们只关注业务角度中最重要的类型&#xff0…

监测利器cacti服务安装

1、Cacti原理及概述1Cacti是一款使用PHP语言开发的性能与流量监测工具。监测的对象可以是linux也可以是windows也可以是路由器交换机等网络设备主要基于SNMPsimple network managerprotocol简单网络管理协议来搜集cpu占用内存使用运行进程数磁盘空间网卡流量等各种网络数据。2实…

linux c之解决array subscript is not integer和AF_NET not undeclared

1、array subscript is not integer 我一开始写的代码是这样的写的 buf[strlen[buf] - 1] \0; 很明显写错了&#xff0c;以后不要再犯这样的错误了&#xff0c;切记 buf[strlen(buf) - 1] \0; 2、AF_NET not undeclared 这是我写的代码 inet.pton(AF_NET, buf 6, &add…

C#中的类型转换

前几篇文章中经常说到强制类型转换&#xff0c;就是可以将派生类对象强制转换为基类对象的做法或者通过as运算符进行的转换。今天我们就来一起简单了解复习下在C#中都有哪些类型的转换。要理解转换很容易&#xff0c;日常的开发编码过程中&#xff0c;由于变量类型的不同我们可…

Excel 用于批量把单元格设置为文本格式保存的数字的宏

首先把所有的数字录入&#xff08;或者导出为&#xff09;井号数字的格式&#xff0c;比如“#3333333323424234234234”&#xff0c;然后运行下面的宏&#xff1a; Sub Num2Text()If Not TypeOf Application.Selection Is Range ThenMsgBox "You must select cells!"…

ACM题解系列之一:刘汝佳:《算法竞赛入门经典》(第2版)

题是书中的题&#xff0c;解法参照了书中的解法&#xff0c;不少解法都做了简化和改进。 做程序&#xff0c;就要努力做到自己的程序是最好的&#xff01; 第3章例题 POJ1488 UVA272 UVALive5381 TEX Quote【输入输出】 POJ2538 ZOJ1884 UVA10082 WERTYU【输入输出】 HDU1318 P…