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 является селектор для ближайшего родительского контейнера ввода с нг-модели.

Итак, вопрос заключается в том, как реализовать шаги 1-3 надлежащим образом по угловому пути?

Answer 1

Почему бы вам не использовать угловые ng-invalid и ng-dirty классы CSS? Они автоматически назначается удельным с нг-моделью, и если вам нужна пользовательская проверка проверить эту документацию:

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