表单域验证工作不正常

Question

我使用的是最新版本的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>" 

    } 
}); 

HTML片段看起来是这样的：

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

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

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

     } 
    }); 

现在范围将是父范围

Answer 2

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