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