Wie erstellt man eine benutzerdefinierte Anweisung, um ngFileUpload-Validierungsnachrichten anzuzeigen?

Question

Ich schrieb einfache Richtlinie ngFileUpload Prüfungsmeldungen zu zeigen, wie Sie unten sehen:

angular.module('app').directive('imageMessages', imageMessages); 

function imageMessages() { 
    var directive = { 
     restrict: 'E', 
     scope: { 
      elem: '@' 
     }, 
     templateUrl: 'app/core/components/validation/file-image-messages.html' 
    }; 
    return directive; 
} 

und dies ist Vorlage der Richtlinie:

<div ng-show="$parent.{{elem}}.$dirty && $parent.{{elem}}.$invalid" class="has-error"> 
    <p class="help-block" 
     ng-show="$parent.{{elem}}.$error.maxSize" 
     translate-compile 
     data-translate="entity.validation.imageMaxSize" 
     translate-value-image-max-size="{{appConstant.imageMaxSize}}"> 
    </p> 
    <p class="help-block" 
     ng-show="$parent.{{elem}}.$error.minSize" 
     data-translate="entity.validation.imageMinSize" 
     translate-value-image-min-size="{{appConstant.imageMinSize}}"> 
    </p> 
    <p class="help-block" 
     ng-show="$parent.{{elem}}.$error.pattern" 
     data-translate="entity.validation.imageTypes" 
     translate-value-image-types="{{appConstant.imageTypes}}"> 
    </p> 
</div> 

und ich verwende schließlich Richtlinie, wie Sie unten sehen:

<form name="nationalCardForm" show-validation novalidate> 
    <button type="button" 
      name="nationalCard" 
      ng-model="vm.nationalCard" 
      ngf-pattern="'.jpg,.jpeg,.gif,.png'" 
      ngf-select 
      ngf-min-size="128KB" 
      ngf-max-size="4MB" 
      accept="image/*"></button> 
    <image-messages elem="nationalCardForm.nationalCard"></image-messages> 
</form> 

mein Problem ist, dass die data-translate Direktive nicht funktioniert und keine Nachrichten anzeigt. Wie kann ich dieses Problem lösen?

UPDATE

Ich denke, das Problem andere Sache ist, denn wenn ich die Seite überprüft, wird die Richtlinie erfolgreich kompiliert, aber ich denke, es ist nicht ng-show="$parent.nationalCardForm.nationalCard.$error.maxSize" erkennt, weil die kompilierte HTML ng-hide Klasse:

<p class="help-block ng-scope ng-hide" 
    ng-show="$parent.nationalCardForm.nationalCard.$error.maxSize" 
    data-translate="entity.validation.imageMaxSize" 
    translate-value-image-max-size="" style=""> 
    maxSize Error 
</p> 

Answer 1

All das war meine Schuld, ich das Problem durch diese Änderungen beheben:

function imageMessages() { 
    var directive = { 
     restrict: 'E', 
     scope: { 
      elem: '=' 
     }, 
     templateUrl: 'app/core/components/validation/file-image-messages.html' 
    }; 
    return directive; 
} 

<div ng-show="elem.$dirty && elem.$invalid" class="has-error"> 
    <p class="help-block" 
     ng-show="elem.$error.maxSize" 
     data-translate="entity.validation.imageMaxSize" 
     translate-value-image-max-size="{{appConstant.imageMaxSize}}"> 
    </p> 
    <p class="help-block" 
     ng-show="elem.$error.minSize" 
     data-translate="entity.validation.imageMinSize" 
     translate-value-image-min-size="{{appConstant.imageMinSize}}"> 
    </p> 
    <p class="help-block" 
     ng-show="elem.$error.pattern" 
     data-translate="entity.validation.imageTypes" 
     translate-value-image-types="{{appConstant.imageTypes}}"> 
    </p> 
</div> 

Änderung elem: '@'-elem: '=' und ng-show="$parent.{{elem}}" s ng-show="elem".

Answer 2

Einfache Sie Elem verwenden: '@', so kann dies nur für String verwendet werden. durch sehen elem = "nationalCardForm.nationalCard" es scheint, elem ist ein Objekt, können Sie bitte elem: "=" und versuchen Sie es.