Angular.js: Set CSS when Input is on Focus - angularjs

Question

Does someone knows how to get the following working:
If an user clicks inside "name" - Set CSS Class to XYZ on DIV ?
<div ng-class="???">Enter your Name here</div>
<input type="text" ng-model="user.name" required id="name"/>
Version: AngularJS v1.0.8

Answer 1

If you're using Angular 1.2.x, see ng-focus and ng-blur:
<div ng-class="{xyz: focused}">Enter your name here</div>
<input type="text" ng-model="user.name" ng-init="focused = false" ng-focus="focused = true" ng-blur="focused = false" id="name" required>
If you're using a 1.0.x version, nothing is stopping you from defining your own focus and blur directives based on Angular 1.2.x's:
/*
* 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});
});
});
};
}];
}
);

Answer 2

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

Answer 3

Working example for pre-1.2.xxx versions: http://jsfiddle.net/atXAC/
In this example, the ng-customblur directive will fire a function() in your controller.
HTML:
<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>
JS:
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;
}
}