Angular 指令中的表单字段验证无法正常工作答案

【问题标题】：Form field validation inside Angular directive not working properlyAngular 指令中的表单字段验证无法正常工作
【发布时间】：2013-11-10 00:25:03
【问题描述】：

我正在使用 AngularJS 的最新版本，它是 1.2rc3 以及 Bootstrap 进行样式设置，并且有这样的指令：

angular.module('form.field', [])

.directive('efield', function() {
    return {
        restrict: 'E',
        scope: {
            form: '@',
            fname: '@',
            label: '@'
        },
        template:   "<div data-ng-class=\"{{form}}.{{fname}}.$valid ? 'form-group' : 'form-group has-error'\">" +
                        "<label class='control-label' for='{{fname}}'>{{label}}</label>" +
                        "<input type='text' class='form-control' name='{{fname}}' data-ng-required='false' data-ng-model='Form.test'>" +
                    "</div>"

    }
});

html sn-p 看起来像这样：

<form name="form" novalidate="novalidate">
    <efield form="form" fname="test" label="field"></efield>
</form>

我使用指令来包装字段 html 和 angular 的验证指令以减少样板代码。问题是即使在输入字段上设置了 data-ng-required='false'，父 div 也会得到“form-group has error”类，而不仅仅是“form-group”。我在这里做错了什么？

【问题讨论】：

标签： javascript html angularjs twitter-bootstrap

【解决方案1】：

由于您在指令中创建的隔离范围，您遇到了问题。有几种方法可以接近它。这是一个将删除隔离范围并改用template:function(elem,attrs)

.directive('efield', function () {
    return {
        restrict: 'E',

        template: function (elem, attrs) {

            return "<div data-ng-class=\"" + attrs.form + "." + attrs.fname + ".$valid ? 'form-group' : 'form-group has-error'\">" +
                "<label class='control-label' for='" + attrs.fname + "'>" + attrs.label + "</label>" +
                "<input type='text' class='form-control' name='" + attrs.fname + "' data-ng-required='false' data-ng-model='Form.test'>" +
                "</div>"

        }
    });

现在作用域将是父作用域的作用域

【讨论】：

【解决方案2】：

看看这个指令https://github.com/nelsonomuto/angular-ui-form-validation

【讨论】：