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中做到这一点，但不是以角度的方式。我有许多表单域需要表现得像这样，所以我试图避免设置一个变量并用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); 
     }); 
     } 
    } 
}); 

Answer 2

您可以执行此

<div class="form-group {{focusIsSet ? 'is-focused': ''}}"> 
     <label>Name</label> 
     <input type="text" name="name" class="form-control" ng-model="abc.user.name" ng-focus="focusIsSet = true" ng-blur="focusIsSet = false" required> 
    </div> 

凡$scope.focusIsSet布尔属性。所以，要看它的状态，你可以在<div class="form-group">与表达方式管理课程{{focusIsSet ? 'is-focused': ''}}

你跟ng-focus和ng-blur指令

UPDATE改变它

我认为你可以追究国家与方式，每个输入

<div class="form-group {{checkFocusState('abc.user.name') ? 'is-focused': ''}}"> 
    <label>Name</label> 
    <input type="text" name="name" class="form-control" ng-model="abc.user.name" ng-focus="setFocus('abc.user.name')" ng-blur="setBlur('abc.user.name')" required> 
</div> 
</div> 

JS代码

var inputsFocusState = {}; 


    $scope.checkFocusState = function(propertyPathName) { 

     if(inputsFocusState[propertyPathName] == true) { 
     return true; 
     } 

     return false 

    } 

    $scope.setBlur = function(propertyPathName) { 
     inputsFocusState[propertyPathName] = false; 
    } 

    $scope.setFocus = function(propertyPathName) { 
     inputsFocusState[propertyPathName] = true; 
    } 

否则，您可以创建每个focus属性为每个输入HTML模板

附： ng-class也是不错的选择

P.S.S我有类似的情况，但形式是完全动态的。

因此，我将每个属性拆分为对象user.name = {value: 'john', buttons: [...], label: 'Name', //and much more}。

还更好地将'user.name.path'更改为类似'user-name-path'。