ctrl。$ parsers.unshift throws undefined

Question

私は2つの入力フィールドに一致するカスタムディレクティブを構築しています。 ctrl.$parsers.unshiftを使用するとエラーCannot read property 'unshift' of undefinedが返されます。何がうまくいかないのか理解できません。 私は角型の入力フィールドを使っています。

<md-input-container> 
    <label>E-Mail</label> 
    <input required type="email" name="clientEmail" ng-model="user.clientEmail" 
     minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/" /> 
    <div ng-messages="registerForm.clientEmail.$error" role="alert"> 
    <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']"> 
     Your email must be between 10 and 100 characters long and look like an e-mail address. 
    </div> 
    </div> 
</md-input-container> 

<md-input-container> 
    <label>E-Mail wiederholen</label> 
    <input required type="email" name="clientEmailconfirm" ng-model="user.clientEmailconfirm" 
    minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/" field-match="{{user.clientEmail}}" /> 
    <div ng-messages="registerForm.clientEmailconfirm.$error" role="alert"> 
    <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']"> 
     Your email must be between 10 and 100 characters long and look like an e-mail address. 
    </div> 
    <div ng-message="fieldMatch">E-Mail do not Match...</div> 
    </div> 
</md-input-container> 

指令：あなたの例で

angular.module('fieldmatcher', []); 
app.directive('fieldMatch', ['$rootScope', '$compile', '$parse', function($rootScope, $compile, $parse) { 
    return { 
    require: ['ngModel'], 
    restrict: 'A', 
    scope: true, 
    link: function(scope, element, attr, ctrl) { 
     ctrl.$parsers.unshift(validate); 
     ctrl.$formatters.push(validate); 

     var validate = function(viewValue) { 
     var comparisonModel = attr.fieldMatch; 

     if (!viewValue || !comparisonModel) { 
      ctrl.$setValidity('fieldMatch', true); 
     } 

     ctrl.$setValidity('fieldMatch', (viewValue === comparisonModel)); 
     return viewValue; 
     }; 

     attr.$observe('fieldMatch', function(comparisonModel) { 
     return validate(ctrl.$viewValue); 
     }); 
    } 
    } 
}]); 

Answer 1

リンク関数のパラメータctrlは、単一のコントローラ素子を有するアレイです。

これは、require属性に配列値を使用したためです。

はctrlパラメータのdocsを参照してください。

正確な値は、ディレクティブの必要特性に依存：
1.何のコントローラません（複数可）が必要：ディレクティブ独自のコントローラ、またはそれはdoesnの場合は未定義T有する1
2列：コントローラインスタンス
3.配列：コントローラインスタンスのアレイ

それで単にチャンeからrequire: 'ngModel',までです。

変数をパーザとフォーマッタの配列に入れる前に、var validate = function(...を定義します。