zoukankan      html  css  js  c++  java
  • angular指令中的require: 'ngModel'

    在说require之前,先看一下scope

    指令scope: false, true,{}:
    1. false:默认使用controller的scope;<br>
    2. true:独立作用域,但是包含父scope的属性和方法;
    3. {} 使用独立的scope;<br>
    3.1. 绑定父作用域的scope,请参考绑定策略;

    require表示需要依赖的指令;如果有依赖的指令,那么link的第四个参数也就是依赖指令的对外暴露的controller也自动会被注入进来

    require选项的值可以分别用前缀?、^ 和?^进行修饰,也可以不修饰。
    如果不进行修饰,比如require:'thisDirective',那么require只会在当前指令中查找控制器
    如果想要指向上游的指令,那么就是用^进行修饰,比如require:'^parentDirective',如果没有找到,那就会抛出一个错误。
    如果使用?前缀,就意味着如果在当前指令没有找到控制器,就将null作为link的第四个参数;
    那么,如果将?和^结合起来,就可以既指定上游指令,又可以在找不到时,不抛出严重的错误。

    自定义指令是当使用require:‘ngModel’ 这个选项来增强对表单的操作,这样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.

  • 相关阅读:
    React元素渲染
    初识JSX
    微信小程序复制文本到剪切板
    微信小程序报错request:fail url not in domain list
    小程序,通过自定义编译条件,模拟推荐人功能
    积分抵扣逻辑
    微信小程序 switch 样式
    tomcat 配置开启 APR 模式
    tomcat8 传输json 报错 Invalid character found in the request target. The valid characters are defined in RFC 3986
    c++数组初始化误区
  • 原文地址:https://www.cnblogs.com/bridge7839/p/6427701.html
Copyright © 2011-2022 走看看