Angularjs 角度-具有隔离作用域的表单输入指令的验证消息

我想我正在慢慢疯掉。一个看似简单的问题让我头疼：(

我有一个表单，其中有一个使用隔离作用域的自定义输入元素指令

我只是想根据输入元素“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");
        }

    }
};
});

uiComponents.directive（'atInput'，function（）{
返回{
//使用内联模板来增强
模板：“{label}}无效”，
//限制对元素的指令匹配
限制：'E'，
范围：{
名称：“@”，
表格：“=”，
型号：'='，
标签：“@”
},
编译：函数（元素，属性）{
var input=element.find（'input'）；
如果（！\未定义（属性必填））{
输入属性（“必需”、“真实”）；
}
}
};
});

---

谢谢。

您的$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>';
    },

模板：函数（$element，$attr）{
返回“{label}}无效”；
},

---

这肯定解决了这个问题。谢谢。在ng show中没有表达式，您知道为什么这也不起作用吗？ng show=“form.registration.$error.required”表单的名称+ngModel字段的名称是存储在$scope上的内容。Angular就是这样工作的-您不需要做什么特殊的事情就可以工作