Javascript Angular指令内的表单字段验证工作不正常

我正在使用AngularJS的最新版本，即1.2rc3和引导程序来进行样式设置，并具有如下指令：

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>"

    }
});

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

angular.module（'form.field'，[]）
.directive（'efield'，function（）{
返回{
限制：'E'，
范围：{
表格：“@”，
fname:“@”，
标签：“@”
},
模板：“”+
“{{label}}”+
"" +
""
}
});

html代码段如下所示：

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>"

    }
});

<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'。我做错了什么？

由于在指令中创建的隔离作用域，您遇到了问题。有几种方法可以解决这个问题。下面是一个将删除隔离作用域并使用

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>"

        }
    });

指令（'efield'，函数（）{ 返回{ 限制：'E'， 模板：函数（元素、属性）{ 返回“”+ “”+attrs.label+“”+ "" + "" } });

---

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

看看这个指令