表單域驗證工作不正常

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