Question

与this question类似，我想在.error为真时在表单字段的父.control-group上添加scope.$invalid。

但是，对ng-class="{ error: formName.fieldModel.$invalid }"中的表单名称进行硬编码意味着我不能以不同的形式重复使用它，而且我不想在任何地方重复此声明。

我认为看起来像这样的指令可以起作用：

<div class="control-group" error-on="model1, model2">
  <input ng-model="model1">
  <input ng-model="model2">
</div>

因此，当model1或model2无效时，.control-group会添加.error。

My attempt here。在给定模型名称的情况下，是否可以从指令访问模型？

如果有更好的方法，我也很乐意听到它。

Answer 1

我不认为编写自定义指令对于这个用例是必要的，因为ng-form directive完全是为那些情况创建的。从指令的文档：

嵌套表单很有用，例如，如果子组的有效性需要确定控制措施。

以你的代码为例，我会写：

<div class="control-group" ng-class="{ error: myControlGroup1.$invalid }>
  <ng-form name="myControlGroup1">
    <input ng-model="model1">
    <input ng-model="model2">
  </ng-form>
</div>

通过使用这种技术，您不需要重复ng-model中使用的表达式，并且可以在任何表单中重用此片段。

Answer 2

您也可以更改已接受答案中的标记，而不进行嵌套，因为ng-form也是一个类指令：

<div class="control-group ng-form" name="controlGroup11" ng-class="{ error: controlGroup1.$invalid }>
  <input ng-model="model1">
  <input ng-model="model2">
</div>

Final solution Fiddle

Answer 3

在链接功能中，您可以访问formController。它具有所有控件。因此，以下内容将使您的指令可以访问.$valid：

el.controller('form')[attrs.errorOn].$valid

但是，我不知道如何观察变化。我试着看attrs.errorOn（即观看ng-model属性），但是除非输入有效值，否则手表不会触发（因为Angular形式的工作方式...除非该值有效，它未分配给ng-model设置的范围属性。）

Fiddle

也许有人可以更进一步......

如何从指令访问子ngModel？

3 个答案: