javascript - AngularJS 指令添加了类，我很困惑

Question

让我们考虑一下示例:

<div class="form-group" ng-class="{'has-error': (form.title.$dirty && form.title.$invalid) }">
   <label for="title" class="col-sm-2 control-label">Title</label>
   <div class="col-sm-10">
      <input ng-model="vm.item.name" type="text" class="form-control" name="title" id="title" placeholder="Title" ng-required="true" />
   </div>
</div>

我有几个输入字段，这个 ng-class="{'has-error': (form.title.$dirty && form.title.$invalid) }" 对我来说看起来很脏.

我正在尝试创建将其封装到 has-error 的指令，因此它看起来像:

<form name="form" has-error=".form-group">
...
</form>

   // ddo for it.
    return {
        restrict: "A",
        require: "form",
        link: function(scope, elements, attributes, form) {
            var selector = attributes["hasError"];
            // 1. find all controls with ng-models
            // 2. validate it
            // 3. find closest element by matched selector and add class `has-error`
        }
    };
};

.form-group 是与 ng-model 输入最接近的父容器的选择器。

所以问题是如何以适当的 Angular 方式实现步骤 1-3？

Answer 1

为什么不直接使用 Angular ng-invalid 和 ng-dirty CSS 类呢？它们会自动分配给 ng-model 的特定输入，如果您需要自定义验证，请查看此文档:

Angular docs

简单示例:

HTML

<form novalidate>
  <input type='text' ng-model='vm.item.name' required>
</form>

CSS

input.ng-invalid {
  border: 1px solid red;
}

input.ng-valid {
  border: 1px solid green;
}

plnkr