关于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的更多相关文章

  1. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  2. angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  3. angularjs指令中scope参数 true、false、{} 的区别详解

    scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...

  4. angularjs指令中的compile与link函数详解(转)

    http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...

  5. angularjs指令中的compile与link函数详解补充

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...

  6. AngularJS 指令中的require

    require参数可以被设置为字符串或数组,字符串代表另外一个指令的名字.require会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数.字符串或数组元素的值是会在当前指令的作 ...

  7. AngularJs 指令中 的Scope属性

    一.概念说明 可以是true. false .哈希对象 {} 1.true 新创建了一个作用域,且继承了父作用域:在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域.它和父作用域不是同一 ...

  8. AngularJs -- 指令中使用子作用域

    下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app和ng-controller是特殊的指令,因为它们 ...

  9. [Angularjs]ng-repeat中使用ng-model遇到的问题

    写在前面 在ng-reapet中如何为ng-model双向绑定呢?在项目中确实遇到这样的问题,绑定了,但是在controller中获取不到它的值,确实挺奇怪的. 系列文章 [Angularjs]ng- ...

随机推荐

  1. [原博客] BZOJ 2242 [SDOI2011] 计算器

    题目链接 noip级数论模版题了吧.让求三个东西: 给定y,z,p,计算`Y^Z Mod P` 的值. 给定y,z,p,计算满足`xy≡ Z ( mod P )`的最小非负整数. 给定y,z,p,计算 ...

  2. 【技术帖】解决 Hudson jenkins 连接等待中 - Waiting for next av

    今天构建项目发现如下问题: jenkins 连接等待中 - Waiting for next available executor 左下角那块一直不运行构建,一直在连接等待. 于是,进入一级页面, 右 ...

  3. Metasploit渗透测试魔鬼训练营

    首本中文原创Metasploit渗透测试著作,国内信息安全领域布道者和资深Metasploit渗透测试专家领衔撰写,极具权威性.以实践为导向,既详细讲解了Metasploit渗透测试的技术.流程.方法 ...

  4. flume 报File Channel transaction capacity cannot be greater than the capacity of the channel capacity错误

    今天在部署flume集群时,在启动collector服务器没报错,启动agent服务器报错: File Channel transaction capacity cannot be greater t ...

  5. 【SPOJ 1182】 SORTBIT - Sorted bit squence (数位DP)

    SORTBIT - Sorted bit squence no tags Let's consider the 32 bit representation of all integers i from ...

  6. [wikioi]最长严格上升子序列

    http://wikioi.com/problem/1576/ 经典的动态规划.我写了个o(n^2)的DP方法. PPT:http://wenku.baidu.com/view/bd290294dd8 ...

  7. [转贴]从零开始学C++之STL(二):实现一个简单容器模板类Vec(模仿VC6.0 中 vector 的实现、vector 的容量capacity 增长问题)

    首先,vector 在VC 2008 中的实现比较复杂,虽然vector 的声明跟VC6.0 是一致的,如下:  C++ Code  1 2   template < class _Ty, cl ...

  8. 【Xamarin开发 Android 系列 13】 应用打包部署

    原文:[Xamarin开发 Android 系列 13] 应用打包部署 开始倒叙咯................ 先更新大宝部署吧,这个章节比较的Easy,童鞋们不用费脑筋.点解?从界面上填写几个参 ...

  9. Android开源项目发现---ProgressBar 篇(持续更新)

    1. SmoothProgressBar 水平进度条 项目地址:https://github.com/castorflex/SmoothProgressBar Demo地址:https://play. ...

  10. Android开源项目发现---ListView篇(持续更新)

    资料转载地址:https://github.com/Trinea/android-open-project 1. android-pulltorefresh 一个强大的拉动刷新开源项目,支持各种控件下 ...