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

<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：＆＃39; @＆＃39;，这只能用于String。通过看elem =＆＃34; nationalCardForm.nationalCard＆＃34;似乎elem是一个对象，请问你能用elem：＆＃34; =＆＃34;并尝试一下。

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验证消息？

2 个答案: