我有一个表单字段:

<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查找该字段。我希望该字段有某种方式可以简单地对其父级执行操作,我可以在每个表单字段中使用相同的方法。

最佳答案

如果您只需要操纵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);
         });
      }
    }
});

关于javascript - AngularJS在事件上将类应用于父元素吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43523437/

10-12 01:08