深刻了解Angularjs指令中的ngModel

时间 2019-11-20

标签深刻了解 angularjs 指令 ngmodel 栏目 AngularJS 繁體版

原文原文链接

关于AngularJs的指令的知识学习，请参考。。。html

此次咱们接上次没讲完的知识继续。前端

前端人员在设计表单逻辑时，数组

在大部分状况下，咱们须要为表单定义不少指令，app

好比比较两个input内的值是否相同，是否不一样等等，ide

这个时候咱们就能够在angularJs定义指令的时候函数

使用require：‘ngModel’ 这个选项来加强咱们对表单的操做，学习

这样就能够做为link选项的第四个参数，ui

 link: function (scope,iElem,iAttr,ngmodel){
              //其余逻辑代码
         }

首先让咱们在控制台输出ngmodel这个参数看看，代码以下this

<!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>

能够看到这个对象包含不少属性和方法，spa

下面让咱们一一讲解下

其中

$viewValue为视图值，即显示在视图（页面）的实际值（就是上面例子中input输入框的值）

$modelValue为模型值，即赋给ng-model的值（与控制器绑定的值）

二者不必定相等，由于$viewValue同步到$modelValue要通过一系列的操做（通过三个管道）。

虽然大多数状况下二者是相等的（例如上面的例子）

$parsers为一个执行它里面每个元素（每个元素都是一个函数）的数组，

主要是用来作验证和转换值的过程，

ngModel从DOM读取的值会被传入到其中的函数

它会依次执行每个函数，把每个函数执行的结果传个下一个函数，

而最后一个函数执行的值将会传到model中，

咱们能够将函数push进去，那样它就会执行。

$formatters也是一个执行它里面每个元素（每个元素都是一个函数）的数组，

主要用来对值进行格式化和转换，以便在绑定了这个值的控件中显示。

当数据的模型值发生变化的时候，里面的函数会被一一执行，

一样咱们就能够将函数push进去，让它执行

$viewChangeListeners的值也是一个由函数组成的数组

当视图的值发生变化的时候里面的函数会被一一调用，

实现跟$watch相似的功能。

$render函数负责将模型值同步到视图上，若是模型值被改变,须要同步视图的值。

$setViewValue用于设置视图值(上面的例子就是将input的value值赋值给$viewValue)

$error 一个包含全部error的对象

$setPristine 设置为原始状态，会添加ng-pristine的class类名，移除ng-dirty的class类名

$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);
  }

View Code

能够了解到执行了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>

View Code

11.

$$validityState（暂时不清楚用法，求解答~）

12.

$isEmpty(value) 函数，判断是否为空

当咱们须要判断input的value值是否为空的时候,可使用这个方法

其实能够就当它是个判断是否为空的方法,传入一个参数,判断这个参数是否为空,你传入任何值均可以

要是须要，咱们也能够本身在指令里重写这个方法，来定义咱们本身须要的“是否为空”的概念

13.

$pristine 若是用户尚未进行过交互,值是true.

$drity 若是用户已经进行过交互，值是true.

14.

$valid 若是没有错误，值是true.

$invalid 若是有错误，值是true.