how to create custom directive to show ngFileUpload validation messages?

Question

I wrote simple directive to show ngFileUpload validation messages as you seen below:

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

and this is template of directive:

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

and finally i use directive as you seen below:

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

my problem is that the data-translate directive does not work and does not show messages. how can i solve this problem?

UPDATE

I think the problem is other thing, because when i inspect the page, the directive are compiled successfully, but i think it doesn't detect ng-show="$parent.nationalCardForm.nationalCard.$error.maxSize" , because the compiled html have ng-hide class:

<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

Simple You are using elem : '@', this can be used for String only. by seeing elem="nationalCardForm.nationalCard" it seems elem is an object, can you please use elem : "=" and try it.

Answer 2

All of that was my fault, i resolve the problem by these changes:

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>

change elem: '@' to elem: '=' and ng-show="$parent.{{elem}}" s to ng-show="elem" .