Angularjs Angular.js：当输入处于焦点时设置CSS

是否有人知道如何实现以下功能：

如果用户在“name”内单击-在DIV上将CSS类设置为XYZ

<div ng-class="???">Enter your Name here</div>

<input type="text" ng-model="user.name" required id="name"/>

在此处输入您的姓名

---

版本：AngularJS v1.0.8

如果您使用的是Angular 1.2.x，请参阅和：

---

1.2.xxx之前版本的工作示例：

在本例中，ng customblur指令将在控制器中启动一个函数（）

HTML:

---

只需使用此指令：

app.directive('ngFocusClass', function () {
  return ({
        restrict: 'A',
        link: function(scope, element) {
            element.focus(function () {
                element.addClass('focus');
            });
            element.blur(function () {
                element.removeClass('focus');
            });
        }
    });
});

---

你们用的是什么版本的angular？谢谢，伙计们。我已经更新了我的答案，以包括稳定和不稳定版本的潜在解决方案。@ArneRie您可以调整我粘贴的代码（从angular的源代码复制）以满足您的需要。如果您想按原样使用它，那么您还需要包含该函数（以及它使用的任何函数）。ng init=“focused=false”可能不是必需的。加载html时，“focused”变量应该已经等于false。但是有很多div和输入，我想一定有其他方法（-：与@Jigar相同，必须在事件上使用

，才能工作。
/*
 * A directive that allows creation of custom onclick handlers that are defined as angular
 * expressions and are compiled and executed within the current scope.
 *
 * Events that are handled via these handler are always configured not to propagate further.
 */
var ngEventDirectives = {};
forEach(
  'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
  function(name) {
    var directiveName = directiveNormalize('ng-' + name);
    ngEventDirectives[directiveName] = ['$parse', function($parse) {
      return function(scope, element, attr) {
        var fn = $parse(attr[directiveName]);
        element.on(lowercase(name), function(event) {
          scope.$apply(function() {
            fn(scope, {$event:event});
          });
        });
      };
    }];
  }
);

<div ng-controller="MyCtrl">
  <div ng-class="{'active':hasFocus==true,'inactive':hasFocus==false}">Enter your Name here</div>
  <input type="text" ng-model="user.name" ng-click="hasFocus=true" ng-customblur="onBlur()" required id="name"/>
</div>

myApp.directive('ngCustomblur', ['$parse', function($parse) {
  return function(scope, element, attr) {
    var fn = $parse(attr['ngCustomblur']);      
    element.bind('blur', function(event) {        
      scope.$apply(function() {
        fn(scope, {$event:event});
      });
    });
  }
}]);

function MyCtrl($scope) {
    $scope.onBlur = function(){        
        $scope.hasFocus = false;
    }
} 

app.directive('ngFocusClass', function () {
  return ({
        restrict: 'A',
        link: function(scope, element) {
            element.focus(function () {
                element.addClass('focus');
            });
            element.blur(function () {
                element.removeClass('focus');
            });
        }
    });
});