深入了解Angularjs指令中的ngModel
关于AngularJs的指令的知识学习，请参考。。。
这次我们接上次没讲完的知识继续。
前端人员在设计表单逻辑时，
在大部分情况下，我们需要为表单定义很多指令，
比如比较两个input内的值是否相同，是否不同等等，
这个时候我们就可以在angularJs定义指令的时候
使用require：‘ngModel’ 这个选项来增强我们对表单的操作，
这样就可以作为link选项的第四个参数，
link: function (scope,iElem,iAttr,ngmodel){
//其他逻辑代码
}
首先让我们在控制台输出ngmodel这个参数看看，代码如下
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.js" charset="utf-8"></script>
</head>
<body ng-controller='ctrl'>
<input type="text" test ng-model=_val>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',function ($scope){
$scope._val = "leifengshushu";
})
app.directive('test',function(){
return{
restrict: 'AE',
require: 'ngModel',
link: function (scope,iElem,iAttr,ngmodel){
console.log(ngmodel)
}
}
})
</script>
</body>
</html>
可以看到这个对象包含很多属性和方法，
下面让我们一一讲解下
其中
1.
$viewValue为视图值，即显示在视图（页面）的实际值（就是上面例子中input输入框的值）
$modelValue为模型值，即赋给ng-model的值（与控制器绑定的值）
两者不一定相等，因为$viewValue同步到$modelValue要经过一系列的操作（经过三个管道）。
虽然大多数情况下两者是相等的（例如上面的例子）
2.
$parsers为一个执行它里面每一个元素（每一个元素都是一个函数）的数组，
主要是用来做验证和转换值的过程，
ngModel从DOM读取的值会被传入到其中的函数
它会依次执行每一个函数，把每一个函数执行的结果传个下一个函数，
而最后一个函数执行的值将会传到model中，
我们可以将函数push进去，那样它就会执行。
3.
$formatters也是一个执行它里面每一个元素（每一个元素都是一个函数）的数组，
主要用来对值进行格式化和转换，以便在绑定了这个值的控件中显示。
当数据的模型值发生变化的时候，里面的函数会被一一执行，
同样我们就可以将函数push进去，让它执行
4.
$viewChangeListeners的值也是一个由函数组成的数组
当视图的值发生变化的时候里面的函数会被一一调用，
实现跟$watch类似的功能。
5.
$render函数负责将模型值同步到视图上， 如果模型值被改变,需要同步视图的值。
6.
$setViewValue用于设置视图值(上面的例子就是将input的value值赋值给$viewValue)
7.
$error 一个包含所有error的对象
8.
$setPristine 设置为原始状态，会添加ng-pristine的class类名，移除ng-dirty的class类名
9.
$setValidity 来设置错误的标志
为一个函数，接受两个参数，第一个参数为错误标志的名字，是字符串类型，将会被设置成$error的属性
第二个参数为布朗值，为这个错误标志的值。
我们在控制台中打印出来ngmodel.$setValidity看看
function (validationErrorKey, isValid) {
// Purposeful use of ! here to cast isValid to boolean in case it is undefined
// jshint -W018
if ($error[validationErrorKey] === !isValid) return;
// jshint +W018
if (isValid) {
if ($error[validationErrorKey]) invalidCount--;
if (!invalidCount) {
toggleValidCss(true);
this.$valid = true;
this.$invalid = false;
}
} else {
toggleValidCss(false);
this.$invalid = true;
this.$valid = false;
invalidCount++;
}
$error[validationErrorKey] = !isValid;
toggleValidCss(isValid, validationErrorKey);
parentForm.$setValidity(validationErrorKey, isValid, this);
}
可以了解到执行了ngmodel.$setValidity会影响到$invalid和$valid的值，
另外从上面代码中$error[validationErrorKey] = !isValid;可以知道，
执行之后，$error对象中的错误标志validationErrorKey为我们设置的布朗值isValid的相反值。
用通俗的话讲，用法就是ngmodel.$setValidity('flag',布朗值)
这样我们就可以在页面上用formname.inputname.$error.flag,例如：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.js" charset="utf-8"></script>
</head>
<body ng-controller='ctrl'>
<form action="" name='myform'>
<input type="text" test ng-model=_val name='jie'>
<div ng-show='myform.jie.$error.empty'>empty!!</div>
</form>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',function ($scope){
$scope._val = "leifengshushu";
})
app.directive('test',function(){
return{
restrict: 'AE',
require: 'ngModel',
link: function (scope,iElem,iAttr,ngmodel){
scope.$watch(function(){return scope._val},function(){
if(ngmodel.$isEmpty(ngmodel.$viewValue)){
ngmodel.$setValidity('empty',false); //注意到这里设置为false，而$error.empty则会显示为true
console.log(ngmodel.$error);
}
})
//console.log(ngmodel.$setValidity);
}
}
})
</script>
</body>
</html>
当你清空input里的值时候，这时候
<div ng-show='myform.jie.$error.empty'>empty!!</div>
就会显示出来。
10.
$name 的值为input的name属性的值，如下
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.js" charset="utf-8"></script>
</head>
<body ng-controller='ctrl'>
<input type="text" test ng-model=_val name='jie'>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',function ($scope){
$scope._val = "leifengshushu";
})
app.directive('test',function(){
return{
restrict: 'AE',
require: 'ngModel',
link: function (scope,iElem,iAttr,ngmodel){
console.log(ngmodel);
console.log(ngmodel.$name); //输出jie
}
}
})
</script>
</body>
</html>
11.
$$validityState（暂时不清楚用法，求解答~）
12.
$isEmpty(value) 函数，判断是否为空
当我们需要判断input的value值是否为空的时候,可以使用这个方法
其实可以就当它是个判断是否为空的方法,传入一个参数,判断这个参数是否为空,你传入任何值都可以
要是需要，我们也可以自己在指令里重写这个方法，来定义我们自己需要的“是否为空”的概念
13.
$pristine 如果用户还没有进行过交互,值是true.
$drity 如果用户已经进行过交互，值是true.
14.
$valid 如果没有错误，值是true.
$invalid 如果有错误，值是true.
深入了解Angularjs指令中的ngModel的更多相关文章
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中scope参数 true、false、{} 的区别详解
scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...
- angularjs指令中的compile与link函数详解（转）
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...
- angularjs指令中的compile与link函数详解补充
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
- AngularJS 指令中的require
require参数可以被设置为字符串或数组,字符串代表另外一个指令的名字.require会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数.字符串或数组元素的值是会在当前指令的作 ...
- AngularJs 指令中 的Scope属性
一.概念说明 可以是true. false .哈希对象 {} 1.true 新创建了一个作用域,且继承了父作用域:在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域.它和父作用域不是同一 ...
- AngularJs -- 指令中使用子作用域
下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app和ng-controller是特殊的指令,因为它们 ...
- [Angularjs]ng-repeat中使用ng-model遇到的问题
写在前面 在ng-reapet中如何为ng-model双向绑定呢?在项目中确实遇到这样的问题,绑定了,但是在controller中获取不到它的值,确实挺奇怪的. 系列文章 [Angularjs]ng- ...
随机推荐
- Oracle死锁只会回滚跟死锁有关的那条SQL，而不会回滚整个事务
数据库检测到死锁后,只会回滚跟死锁有关的某条语句,而不会回滚整个事务. 创建测试环境:SQL> create table test1(id int,name char(1)); 表已创建. SQ ...
- 如何使用Github仓库创建网站
官方文档:https://help.github.com/categories/github-pages-basics/ 1.创建一个仓库 2.额外建立一个gh-pages分支 3.添加CNAME文件 ...
- BZOJ 1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富
Description 最近,奶牛们热衷于把金币包在面粉里,然后把它们烤成馅饼.第i块馅饼中含有Ni(1<=Ni<=25)块金币,并且,这个数字被醒目地标记在馅饼表面. 奶牛们把所有烤好的 ...
- 算法练习之：Doubles
Doubles Time Limit: 1000MS Memory Limit: 65536KB Problem Description As part of an arithmetic compet ...
- [OJ] Insert Interval
LintCode #30. Insert Interval (Easy) LeetCode #57. Insert Interval (Hard) class Solution { public: v ...
- 关于Json传递的日期/Date(数字)/解析
在将DateTime类型的数据Json后传到前台展示,出现如下效果 ,在客户端如何解析呢?在jquery easyui 的字段中加一个格式化的函数调用. { field: 'CreateTime' ...
- python 替换windows换行符为unix格式
windows 默认换行符为 \r\n; unix默认换行符为 \n; 所以当win下编辑的脚本在linux下显示末尾多了^M: 换行符修改为同一的unix格式脚本如下: def run(path,f ...
- C++ Primer 随笔 Chapter 4 数组和指针
1.数组:数组是由类型名.标识符和维数组成的符合数据类型,类型名规定了存放在数组中的元素类型,维数规定数组中包含元素的个数而标识符就是数组的名称.例如: int arr[10]; 其中 int 是类 ...
- 使用SQL Server 2014内存数据库时需要注意的地方
作者 王枫发布于2014年7月4日 本文从产品设计和架构角度分享了Microsoft内存数据库方面的使用经验,希望你在阅读本文之后能够了解这些新的对象.概念,从而更好地设计你的架构. 内存数据库,指的 ...
- Muduo-Base-TimeStamp类
Muduo的时间戳类. 主要功能: 能够获取当前的时间 能够将当前的时间以string的形式返回 能够获取两个时间戳类的时间差 能够获取当前精确的时间(微秒级) #ifndef TIMESTAMP_H ...