控制器 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);
        };
      }
    };
});

當我嘗試提交表單時，我在控制台中收到以下奇怪的錯誤：

錯誤：ctrl 是未定義的控制器@ 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

將控制器更改為鏈接。

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