Question

我想我慢慢疯了。看似简单的问题让我很头疼:(

我有一个使用隔离范围的自定义输入元素指令的表单。

我只是希望能够根据输入元素“required”属性的有效性显示错误消息，但我似乎是围成一圈。我不太了解这种情况下的绑定。

请在这里看看我的小提琴：

我希望错误信息“Invalid”出现在输入字段的右侧，因为它是空的。

HTML

<div ng-app="UIComponents">
<form ng-submit="formSubmit()" name="vrmForm" >
    <at-input name="registration" label="Registration" form="vrmForm" model="vrmLookup.registration" minlength="3" required>
    </at-input>
</form>
</div>

JS是

uiComponents.directive('atInput', function () {
    return {
        // use an inline template for increased
        template: '<div>{{label}}</div><input name="{{name}}" required type="text" ng-model="model"/>  <span class="error" ng-show="form.{{name}}.$error.required">Invalid</span>',
        // restrict directive matching to elements
        restrict: 'E',
        scope: {
            name: '@',
            form: '=',
            model: '=',
            label: '@'
    },
    compile: function(element, attr) {
        var input = element.find('input');

        if (!_.isUndefined(attr.required)) {
            input.attr("required", "true");
        }

    }
};
});

谢谢。

Answer 1

您的$ scope.form。名称属性不能是有角度的绑定表达式。从指令返回模板函数并构建模板字符串：

    template: function($element, $attr) {
        return '<div>{{label}}</div><input name="' + $attr.name + '" required type="text" ng-model="model"/>  <span class="error" ng-show="form.' + $attr.name + '.$error.required">Invalid</span>';
    },

Demo

Angular - 具有隔离范围的表单输入指令的验证消息

1 个答案: