指令中的角度验证问题

Question

我正在与角度指令中的验证作斗争，但没有成功。

当我将 name 属性提交给指令模板时，form.name.$error 对象似乎未定义。如果我在模板中使用固定的名称属性，则 $error 对象很好，但所有元素当然相同。

html 是：

 <form name="form" novalidate>

<p>
  <testvalidation2 name="field1" form="form"  field="testfield4" required="true"> 
  </testvalidation2>
</p>
</form>

指令如下所示：

app.directive('testvalidation2', function(){
return {
restrict: 'E',
scope: {
  ngModel: '=',
  newfield: '=field',
  required: '=required',
  form: '='
},
templateUrl: 'template2.html',
link: function(scope, element, attr){
 scope.pattern = /\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;
 scope.name = attr.name;
}

} // 返回 });`

最后是模板：

<div>
<input  name="{{name}}" type="text" ng-model="newfield" ng-required="required" ng-pattern="pattern"> {{FIELD}}</input>
<span ng-show="form.name.$error.required">Required</span>
<span ng-show="form.name.$error.pattern"> Invalid </span>
<p>Output {{form.name.$error | json}}</p>
</div>

我为我的Angular Validation Problem 创建了一个 plunker 如果有人能帮助我赢得这场战斗，我会很高兴。

迈克尔

Answer 1

我没有解决此问题的方法，但我可以告诉您问题所在。

• 首先在您的 html 中 form="form" 应具有 form="form2" 形式的名称。
• 其次，由于您在指令中创建了一个新作用域，因此创建的作用域是一个不继承自父作用域的隔离作用域，这意味着您添加的模板input 控件不会被添加到父作用域中form2。

目前我能想到的唯一出路是不使用隔离作用域。