angularjs - Hur riktar du in ett omslutet HTML-inmatningsfält med en attributbaserad direktiv som är tillämpad på omslaget?

Jag har en anpassad elementbaserad direktiv (input-field), som omsluter ett standard HTML-input. Jag har också skapat ett attributbaserat valideringsdirektiv (unique-email-validator).

Om jag lägger till den attributbaserade validatorn till den elementbaserade direktiven, när det finns ett valideringsfel, tillämpas ng-invalid-unique-stilarna på input-field-direktivet och inte på själva HTML-inputfältet. Detta hindrar mina ng-messages från att visas korrekt.

Hur gör jag så att unique-email-validator tillämpas på det omslutna inmatningsfältet?

Anpassat inmatningsfält med unik e-postvärdesattribut tillämpat

<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>

Anpassad inmatningsdirektiv

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());
}

Attributbaserad e-postvalidator

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 === "[email ") {
           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());
}