Angular.js:当输入处于焦点时设置 CSS [英] Angular.js: Set CSS when Input is on Focus

问题描述

有人知道如何使以下工作:

Does someone knows how to get the following working:

如果用户在名称"内部单击 - 在 DIV 上将 CSS 类设置为 XYZ ?

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

版本:AngularJS v1.0.8

Version: AngularJS v1.0.8

推荐答案

如果您使用的是 Angular 1.2.x，请参阅 ng-focus 和 ng-blur:

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>

如果您使用的是 1.0.x 版本，则没有什么能阻止您根据 Angular 1.2.x的:

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

这篇关于Angular.js:当输入处于焦点时设置 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！