如何使用应用于包装器的基于属性的指令来定位包装的html输入字段？

Question

我有一个基于自定义元素的指令（input-field），它包装了一个标准的html输入。我还创建了一个基于属性的验证指令（unique-email-validator）。

如果我将基于属性的验证器添加到基于元素的指令，当存在验证错误时，它会将ng-invalid-unique样式应用于input-field指令而不是实际的html输入字段。这可以防止我的ng-messages正常显示。

如何制作它以使unique-email-validator将自身应用于包装的输入字段？

应用了唯一电子邮件值属性的自定义输入字段

<input-field unique-email-validator name="emailAddress" ng-required="true" ng-disabled="context.isReadonly" ng-model="context.selectedSection.model.emailAddress" content-key="LABEL_EMAIL" ></input-field>

自定义输入指令

module Components.Controls {
"use strict";

export class InputField implements angular.IDirective {

    restrict = "E";
    scope = {
        name: "@",
        currentValue: "=ngModel",
        contentKey: "@",
        disabled: "=ngDisabled",
        required: "=ngRequired"
    };
    replace =true;

    template = "<label translate=\"{{::contentKey}}\"></label><span ng-if=\"required\">*</span><input name=\"{{name}}\" ng-model=\"currentValue\" ng-disabled=\"disabled\" ng-required=\"required\" />";

    static factory(): angular.IDirectiveFactory {
        let directive = () => {
            return new InputField();
        };


        return directive;
    }
}

angular.module("components.controls")
    .directive("inputField", InputField.factory());
}

基于属性的电子邮件验证器

module Components.Controls {
"use strict";

export class UniqueEmailValidator implements angular.IDirective {
  restrict = "A";
  require = "ngModel";

   link = (scope, element, attrs, ngModel) => {
     let q = this.$q;

     ngModel.$asyncValidators.unique = function (modelValue, viewValue) {
       let deferred = q.defer();
       setTimeout(function () {

         if (viewValue === "test@test.com") {
           deferred.reject();
           console.log("rejecting!");
         }
         else {
           deferred.resolve();
           console.log(viewValue + " is unique");
         }
       }, 1000);

       return deferred.promise;
     }
   }

   constructor(private $q: angular.IQService) {

   }

   static factory(): angular.IDirectiveFactory {

     let directive = ($q) => {
       return new UniqueEmailValidator($q);
     };

     directive.$inject = ["$q"];

     return directive;
   }
}

  angular.module("components.controls")
    .directive("uniqueEmailValidator", UniqueEmailValidator.factory());
}