Angularjs 将类添加到跨度元素

我想使用angular向span元素添加类

<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>

您可以根据在焦点输入函数上设置的变量，在span元素上使用指令。

您可以这样做：

<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;
  };

$scope.focusInput=函数（$event）
{
$scope.inputFocused=true；
};

您可以在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>

您可以尝试使用jquery选择器来实现这一点吗？实际上他已经在这样做了，angular.element是jquery函数的包装器，当jquery可用时。

<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>