углового класса добавить, чтобы охватить элемент

Question

Я хочу, чтобы добавить класс для перекрытия элемента с помощью углового

<div class="input-group textbox-wrap fade-in two">      
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>       
    <input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" 
     required="required" data-ng-model="username" ng-focus="focusInput($event)" ng-blur="blurInput($event)" autofocus /> 
</div> 

Я могу добавлять класс к родительскому DIV, но мне нужно, чтобы применить класс для диапазона элемента.

В контроллере,

$scope.focusInput= function($event) 
    { 
    angular.element($event.target).parent().addClass('focused');  
    }; 

Answer 1

Вы можете сделать это на самом HTML.

<div class="input-group textbox-wrap fade-in two"> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
     <input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" 
     required="required" ng-class="'focused':focused" 
    data-ng-model="username" ng-focus="focused=true" ng-blur="focused=false" autofocus /> 
</div> 

Answer 2

Вы можете использовать директиву ngClass на элемент диапазона, основанный на переменной, установленной на входной функции фокусировки.

Answer 3

Вы можете сделать это:

<div class="input-group textbox-wrap fade-in two">      
    <span class="input-group-addon" ng-class="{'yourClass': inputFocused}"><i class="glyphicon glyphicon-user"></i></span>       
    <input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" 
     required="required" data-ng-model="username" ng-focus="focusInput()" ng-blur="blurInput($event)" autofocus /> 
</div> 

$scope.focusInput= function($event) 
    { 
    $scope.inputFocused = true; 
    };