ctrl.$ parsers.unshift抛出undefined

Question

我正在构建一个自定义指令来匹配两个输入字段.所以使用ctrl.$parsers.unshift抛出一个错误Cannot read property 'unshift' of undefined.无法弄清楚出了什么问题.顺便说一句,我正在使用Angular Material Input Fields.

<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参数:

确切的值取决于指令的要求特性:
1.无需控制器(S):该指令的自己的控制器,或者不确定的,如果它不具有一个
2串:控制器实例
3阵列:控制器实例的数组

所以只需改为require: 'ngModel',.

var validate = function(...在将变量放入解析器和格式化程序数组之前定义它.