如何创建自定义指令以显示 ngFileUpload 验证消息？

Question

我编写了简单的指令来显示 ngFileUpload 验证消息，如下所示：

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

这是指令模板：

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

最后我使用如下指令：

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

我的问题是 data-translate 指令不起作用并且不显示消息。我该如何解决这个问题？

更新

我认为问题出在其他地方，因为当我检查页面时，指令编译成功，但我认为它没有检测到 ng-show="$parent.nationalCardForm.nationalCard.$error.maxSize"，因为编译的 html 有 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

简单您正在使用 elem : '@'，这只能用于字符串。通过查看 elem="nationalCardForm.nationalCard" 似乎 elem 是一个对象，你可以使用 elem : "=" 并尝试一下吗？

Answer 2

所有这些都是我的错，我通过这些更改解决了问题：

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>

将 elem: '@' 更改为 elem: '='，将 ng-show="$parent.{{elem}}" 更改为 ng-show="elem"。

如何创建自定义指令以显示 ngFileUpload 验证消息？

how to create custom directive to show ngFileUpload validation messages?

angularjs

angularjs-directive

angular-translate