Angularjs: Stellen Sie CSS, wenn Eingang ist auf Fokus

Question

Hat jemand weiß, wie die folgende Funktion zu erhalten:

Wenn ein Benutzer klickt innen „name“ - CSS Klasse XYZ Auf DIV?

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

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

Version: v1.0.8 AngularJS

Answer 1

Wenn Sie Angular 1.2.x verwenden, siehe ng-focus und 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> 

Wenn Sie eine 1.0.x-Version verwenden, nichts hält Sie davon ab, Ihre eigenen focus und blur Direktiven basierend auf 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}); 
      }); 
     }); 
     }; 
    }]; 
    } 
); 

zu definieren

Answer 2

Arbeitsbeispiel für pre-1.2.xxx Versionen: http://jsfiddle.net/atXAC/

In diesem Beispiel ist die ng-customblur Richtlinie wird eine Funktion() in Ihrem Controller ausgelöst.

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

Answer 3

Gerade diese Anweisung verwenden:

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