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

Question

我想我正在慢慢发疯。看似简单的问题却让我头疼:(

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

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

请看我这里的小提琴：

http://jsfiddle.net/brogueady/zwbbLggL/

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

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.name 属性不能是角度绑定表达式。从您的指令中返回一个模板函数并构建模板字符串：

    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