angular指令中的require: 'ngModel'

時間 2019-11-21

標籤 angular 指令 require ngmodel 欄目 AngularJS 简体版

原文原文鏈接

在說require以前,先看一下scopehtml

指令scope: false, true,{}:
1. false:默認使用controller的scope;<br>
2. true:獨立做用域，可是包含父scope的屬性和方法；
3. {} 使用獨立的scope;<br>
3.1. 綁定父做用域的scope，請參考綁定策略；數組

require表示須要依賴的指令；若是有依賴的指令，那麼link的第四個參數也就是依賴指令的對外暴露的controller也自動會被注入進來app

require選項的值能夠分別用前綴？、^ 和？^進行修飾，也能夠不修飾。
若是不進行修飾，好比require:'thisDirective'，那麼require只會在當前指令中查找控制器
若是想要指向上游的指令，那麼就是用^進行修飾，好比require:'^parentDirective'，若是沒有找到，那就會拋出一個錯誤。
若是使用？前綴，就意味着若是在當前指令沒有找到控制器，就將null做爲link的第四個參數；
那麼，若是將？和^結合起來，就能夠既指定上游指令，又能夠在找不到時，不拋出嚴重的錯誤。函數

自定義指令是當使用require：‘ngModel’ 這個選項來加強對錶單的操做，這樣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

1.rest

$viewValue爲視圖值，即顯示在視圖（頁面）的實際值（就是上面例子中input輸入框的值）code

$modelValue爲模型值，即賦給ng-model的值（與控制器綁定的值）orm

二者不必定相等，由於$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);
  }

能夠了解到執行了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>