javascript - AngularJS 将类应用于事件的父元素？

Question

我有一个表单域:

<div class="form-group">
  <label>Name</label>
  <input type="text" name="name" class="form-control" ng-model="abc.user.name" ng-focus="abc.setFocus('name')" required>
</div>

我需要做的是设置为父元素添加一个类，这里​​<div class="form-group"> ，当输入有焦点时，当字段失去焦点时将其删除。

我知道如何在 jQuery 中执行此操作，但不知道如何以 Angular 方式执行此操作。我有很多表单字段需要像这样，所以我试图避免设置变量并使用 ng-class 查找它。 .我宁愿有一些方法可以让该字段对其父项进行简单操作，我可以在每个表单字段中使用相同的方法。

Answer 1

如果您需要做的只是操作 dom，指令可能是最简单的通用方法。

<div class="form-group" focus-class="focused">
  <label>Name</label>
  <input name="name" class="form-control" ng-model="abc.user.name" required>
</div>

JS

angular.module('myApp').directive('focusClass', function(){
    return {
      link:function(scope, elem, attrs){
         elem.find('input').on('focus', function(){
            elem.toggleClass(attrs.focusClass);
         }).on('blur', function(){
            elem.toggleClass(attrs.focusClass);
         });
      }
    }
});