参考

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

https://docs.angularjs.org/api/ng/type/form.FormController

angular 提供了表单指令,它和ngModel 经常一起工作,所以一起介绍。

我们先来了解一下基本的ng-model

ng-model 作用是double binding

ng-model 在不同的element上会有不同的同步模式,这些angular已经帮我封装了许多.

当然 angular 也提供了一些方法在 ngModel 这个指令的 controller中(名为 ngModel),使得我们可以在自己的控件 (e.g. : checkBoxList, dropDownList) 也做double binding

此外 ng-model 还有一些基本 option 可以设置(1.3才有)

<input type="text" name="userName"
ng-model="user.name"
ng-model-options="{ updateOn: 'blur', debounce: 1000 ,getterSetter: true }"/><br />
<pre>user.name = <span ng-bind="user.name()"></span></pre>

updateOn 写入一个事件名来表示我们希望什么事件促使这个elem被更新,比如 blur / keyup 等

debounce 是deley update 毫秒, 一般我们不希望用户联系每一次keydown时都更新,而是等到用户停止输入时才执行一次更新。就可以放一个delay 实现了

getterSetter = true 可以用在依赖属性上,比如我们的$scope.name = function (){ retrun xx; } 当name是个方法的时候

我们再来看看 ng-model controller 还有些什么属性方法

ngModel controller

                     var ngModelController = {
"$viewValue": "12", //界面显示的数据
"$modelValue": "12", //$scope的value
"$parsers": [null, null], //这里的null是因为json无法看到,是 function 来的
"$formatters": [null, null],
"$viewChangeListeners": [null],
"$pristine": false,
"$dirty": true,
"$valid": true,
"$invalid": false,
"$name": "name",
"$error": {
"required": false, //这里是true代表有error , valid fail
"minlength": false
},
"$$validityState": {} //私有属性不详
}

$parsers, $formatters 是数据拦截

每一次view to scope 时,会触发$parsers里所有的方法, 我们可以在方法中对数据做一些处理,比如验证或者装换. $formatters 则是 scope to view 时触发

$viewChangeListeners 官网的说明是

Array of functions to execute whenever the view value has changed. 每一次view value change 触发

It is called with no arguments, and its return value is ignored. //no para , no return

This can be used in place of additional $watches against the model value. //用途不是很明白

$dirty , $valid 等,都是配合表单使用的,表单会对这个值总一些统计的工作。

还有一些方法 :

"$render",  
"$isEmpty",
"$setValidity", //常用的应该是这个, para(验证指令, isValid) 
"$setPristine",
"$setViewValue"

$render 和 $setViewValue 是我们做控件时一定要厉害的。

$render 是一个被angular调用的方法,由我们来告诉angular如何渲染页面。

当 digest 发现scope value changed , angular 会把 $modelValue 经过 $formatters 得出来的值放入 $viewValue中,(这时 $viewValue = $modelValue 经过 $formatters) 然后触发我们写好的 $render .

所以我们在 $render 里面就获取 $viewValue 来写入dom .

$setViewValue 则相反,它是angular写好的方法,我们来调用它,当dom 触发change 或 blur 等事件时,我们获取了value, 我们就调用这个 $setViewValue .

第一步 angular 会 $viewValue = newValue, 然后把经过 $parsers 得到的值 写入 $modelValue 和 scope value .

外传 :

题外话 , 框架和库的区别,库里有很多别人的方法,我们负责写过程,间中调用库里的方法 。框架呢则相反,我们写很多方法告诉,过程则是框架定义好的,它在执行过程时会调用我们写的方法。(忘记从哪里看到的,这让我领悟很多,特别分享一下).

$setValidity 是用于和表单验证通讯的 .

这里给一个自定义验证指令的例子

    <div ng-app="app" ng-controller="email">
<div ng-form="emailForm">
<input type="text" name="email" ng-model="email" is-abc />
<span ng-click="see()">{{ emailForm.$valid }}</span>
</div>
</div> angular.module("app", []).
directive("isAbc", ["$timeout", function ($timeout) {
return {
restrict: "A",
require: "ngModel",
link: function ($scope, $element, $attrs, $ctrl) {
var validator = function (v) {
$timeout.cancel($ctrl.timeout);
$ctrl.timeout = $timeout(function () {
if (v == "abc") {
$ctrl.$setValidity('isAbc', true);
return v;
} else {
$ctrl.$setValidity('isAbc', false);
return undefined;
}
}, 2000);
}
$ctrl.$parsers.push(validator);
}
}
}]);

这里我们创建了一个 is-abc 指令,我们拦截了ngModel,添加了验证手法,通过 $setValidity 通知 form , 这里还做了一个延迟验证的手法。

ng-form || form 指令

ng-form 和 form 是一样的,controller 名字是 form

    <div ng-app="app" ng-controller="email">
<form name="emailForm">
<input type="text" name="email" ng-model="email" required />
<input type="text" name="name" ng-model="email" required ng-minlength="2" />
<span ng-click="see()">{{ emailForm.$valid }}</span>
</form>
</div>

form 有一些规范,一定要有name , 里面的控件也都要有 name , 最好都用ng-model沟通,因为angular封装了自动添加controller 等等的事儿 .

流程大致上是这样,

form -> model -> 验证指令

指令通过拦截model做验证等,通过model告知form

form controller 有一些属性

                     var formController = {
"$name": "emailForm",
"$dirty": false, //form被动过
"$pristine": true, //form没人动过
"$valid": false, //全部验证pass
"$invalid": true, //有fail的
"email": {}, //key是form里头的控件nama,value是 控件 ngModel controller 对象,
"$error": {"required" : []} //key 是 error 指令名字,value是一个数组,里面是invalid控件的 ngModel controller对象
}

主要是收录了表单内控件的 ng-model controller 引用

form 中的方法

"$addControl", //添加ngModel controller ,ngModel会自动添加,除非自定义指令或许会用上
"$removeControl",
"$setValidity",  para(验证指令, isValid, ngModel controller) set ngModel的valid 
"$setDirty", no para , set属性
"$setPristine" no para , set属性

调用angular 提供的方法,它们会让form model parent等串联起来 .

更新 : 2015-05-23

在1.3版本后我们对 ngModel 的验证比较轻松了,ngModel.$asyncValidators or ngModel.Validators 来输入我们要的验证方法.

ngModel 嵌套的情况,有时候可能指令会嵌套,导致ngModel也嵌套了,有些人可能会直接这样写

scope : {

  ngModel : "="

}

表面上你看这样只是没有问题的,因为angular确实会帮你同步这个值,但是这样写的话,父层的$parsers是不会被触发的。

正确的做法是在子层通过 $render 和 $setViewValue 来修改父层的 ngModel

form 和 ngModel的更多相关文章

  1. angular4 Form表单相关

    ng4中,有两种方式去声明一个表单 一:Template-Driven Forms - 模板驱动式表单   [引入FormsModule] 1.ngForm赋值 [可以方便的获取表单的值] <f ...

  2. 理解AngularJS生命周期:利用ng-repeat动态解析自定义directive

    ng-repeat是AngularJS中一个非常重要和有意思的directive,常见的用法之一是将某种自定义directive和ng-repeat一起使用,循环地来渲染开发者所需要的组件.比如现在有 ...

  3. 【AngularJs】---$sce 输出Html

    [问题描述] angular js的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model 但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各 ...

  4. Angular JS API

    ng function angular.bind angular.bootstrap angular.copy angular.element angular.equals angular.exten ...

  5. angular中的ng-bind-html指令和$sce服务

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

  6. angularJS 系列(一)

    angularJS 中 $scope 的原型 和 原型继承之间的细微差别是什么? 参考:http://stackoverflow.com/questions/14049480/what-are-the ...

  7. 从浅入深剖析angular表单验证

    最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...

  8. AngularJs的基本使用(一)

    AngularJS 指令 AngularJS 通过 ng-directives 扩展了 HTML,AngularJS 指令是以 ng 作为前缀的 HTML 属性. ng-app 指令定义一个 Angu ...

  9. angular的小实例

    主要是使用了angular的指令. 学习地址:http://www.runoob.com/angularjs/angularjs-tutorial.html 1. 效果: 输入数据剩余字数会相应减少, ...

随机推荐

  1. Delphi default属性

    Delphi default属性 Delphi控件指定属性的时候可以加上Default关键字,例如property Color default clBtnface.一直以为这个是构造类的时候的默认值, ...

  2. asp.net 1.1网站开发配置出现”Visual Studio .NET 无法创建或打开应用程序”解决方法

    可能的解决方案: 1.注册.net framework 1.1 C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322\aspnet_regiis /i 2,如果配置 ...

  3. Android:ImageView应用之图片浏览器

    ImageView控件实现的简单图片浏览器 一.纯显示图片: 引言: 读者在做这个东西的时候,需要自己把图片在源程序中导入. 读者要注意:所有导入的图片之前,图片的命名只可以是小写英文和数字. 效果图 ...

  4. SQL-Customers Who Never Order

    Suppose that a website contains two tables, the Customers table and the Orders table. Write a SQL qu ...

  5. openstack 手动 部署安装调试

    Virtual Interface creation failed

  6. 一维DFT

    学习DIP第3天 傅里叶变换是一个非常大的话题.今天实现了下一维的DFT,兴许将完毕其它傅里叶系的算法实现和实验. DFT公式:                             当中e 是自然 ...

  7. Linux 与 BSD 有什么不同?

    Linux 与 BSD 有什么不同? 这篇文章是别人写的,并做了一点修改. 汉澳sinox就是基于bsd开发的,因此能够理解为一个bsd分支,可是由于sinox不开源,被排除在外.bsd不是商业软件, ...

  8. LOADRUNNER8.1卸载

    卸载LOADRUNNER8.1后,不能正常又一次安装的问题. Loadrunner 8.1 安装1.下载Loadrunner8.1 (官方英文版) 2.安装Loadrunner8.1 3.破解:htt ...

  9. Java 之文件目录操作

    1.判断文件是否存在 File file = new File("d:\\study\\temp\\test.java"); boolean bl = file.exists(); ...

  10. DataTables 配置和使用

    WEB后台开发,如果用的是Bootstrap框架,那这个表格神器你一定不要错过. 官方地址:https://datatables.net/ What?英文不好,没关系咱有中文的 http://data ...