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的最近父容器的选择器。

所以问题是如何以适当的角度方式实施步骤1-3？

Answer 1

为什么不使用Angular ng-invalid和ng-dirty CSS类？它们会自动分配给具有ng-model的特定输入，如果需要自定义验证，请查看以下文档：

Angular docs

简单示例：

HTML

    tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed, evt) {
          ed.getBody().setAttribute('spellcheck', true);
      });
   }
   });

CSS

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

plnkr

添加类的AngularJS指令，我很困惑

1 个答案: