javascript - 我的自定义指令中未定义 Controller ngModel

Question

我向我的 Angular 应用程序添加了一个自定义指令，该应用程序负责验证邮件是否有效，该指令似乎工作得很好，因为我收到了错误消息:

myApp.directive('validateEmail', function(ValidationService) {
    return {
      require: 'ngModel',
      controller: function($element) {
        var ctrl = $element.controller('ngModel');

        ctrl.$validators.validateEmail =
          function(modelValue, viewValue) {
            return ValidationService.isValidEmail(viewValue);
        };
      }
    };
});

当我尝试提交表单时，我在控制台中收到以下奇怪的错误:

Error: ctrl is undefined controller@http://localhost:8080/MYAPP/js/app.js:293:9 invoke@https://code.angularjs.org/1.5.1/angular.js:4625:16 $ControllerProvider/this.$gethttps://code.angularjs.org/1.5.1/angular.js:9886:24 nodeLinkFn@https://code.angularjs.org/1.5.1/angular.js:8870:34 compositeLinkFn@https://code.angularjs.org/1.5.1/angular.js:8248:13 publicLinkFn@https://code.angularjs.org/1.5.1/angular.js:8128:30 compilationGenerator/<@https://code.angularjs.org/1.5.1/angular.js:8467:16 boundTranscludeFn@https://code.angularjs.org/1.5.1/angular.js:8266:16 controllersBoundTransclude@https://code.angularjs.org/1.5.1/angular.js:8963:20 ngIfWatchAction@https://code.angularjs.org/1.5.1/angular.js:25178:15 $digest@https://code.angularjs.org/1.5.1/angular.js:16728:23 $apply@https://code.angularjs.org/1.5.1/angular.js:16992:13 ngModelPostLink/<@https://code.angularjs.org/1.5.1/angular.js:26838:15 dispatch@http://localhost:8080/MYAPP/js/jquery-3.1.1.min.js:3:10263 add/q.handle@http://localhost:8080/MYAPP/js/jquery-3.1.1.min.js:3:

8325

Answer 1

将 Controller 更改为链接。

myApp.directive('validateEmail', function(ValidationService) {
    return {
      require: 'ngModel',
      link: function (scope, element, attrs, ctrl) {
        ctrl.$validators.validateEmail =
          function(modelValue, viewValue) {
            return ValidationService.isValidEmail(viewValue);
        };
      }
    };
});