关于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. Net Core Docker

    Net Core Docker轻量级的web框架   .net core现在已经有了大的发展,虽然笔者现在已经从事python开发,但是一直在关注.net的发展,在逛博客园的时候,发现有大家都会提到N ...

  2. nutch 索引

    nutch开发环境搭建     nutch-1.3导入eclipse     nutch-1.7导入eclipse nutch部署     nutch-1.3linux下部署     nutch-1. ...

  3. javascript 字符串转数字

    //把str转换为数字的方式,想起很久以前的一个面试题,说字符转数字的方式有哪些,现在想了想 var str1='4.88',str2='4.8xx'; console.log(parseInt(st ...

  4. 关于路由、AP、交换机的小总结

    整理自关于路由.AP.交换机的小总结 要将各种设备连成网络,一般运用网络中的两层,即第二层的数据链路层和第三层的网络层.而设备之间需要通信就需要各自的网络地址. 第二层设备有物理地址即MAC地址,这对 ...

  5. 【网络流24题】No.16 数字梯形问题 (不相交路径 最大费用流)

    [题意] 给定一个由 n 行数字组成的数字梯形如下图所示. 梯形的第一行有 m 个数字.从梯形的顶部的 m 个数字开始,在每个数字处可以沿左下或右下方向移动, 形成一条从梯形的顶至底的路径.规则 1: ...

  6. 【GDOI2014 DAY2】Beyond （扩展KMP）

    [题目] [题意] Jodie和Aiden在做游戏.Jodie在一个长度为l字符串环上走路,他每离开一个就会记下格子当前字符.他让Aiden在他走了一圈后叫他停下来.Aiden决定耍一下Jodie,在 ...

  7. DHTMLX 前端框架 建立你的一个应用程序教程(一)

    介绍 从这里下载官网 示例 此教程包含是多方面的: 1.如何在页面上添加标准的dhtmlx组建 2.如何在页面上组织组件 3.如何添加过滤 4.如何从服务器端获取数据填充组建 5.如何保存用户修改的数 ...

  8. Android Service 详解

    一个Service也是一种应用程序组件,它运行在后台以提供某种服务,通常不具有可见的用户界面.其它的应用程序组件可以启动一个 Service,即使在用户切换到另外一个应用程序后,这个Service还是 ...

  9. PHP curl传输文件的版本兼容性

    /** * 存储文件到远程服务器 * * @param string $filePath * 文件绝对路径 * @param string $fileSaveUrl * 存储的远程目标地址 * @pa ...

  10. AHOI2006文本编辑器editor

    1269: [AHOI2006]文本编辑器editor Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1885  Solved: 683[Submit ...