当文本框使用 angularjs 获得焦点时如何为其父级设置轮廓

Question

我自己试了很多，也没有得到明确的答案。这可能是因为我是 angularjs 的新手。我有一个包裹在 div 里面的文本框，比如：

<div class="email-icon"><input type="text" class="input-field clearfix email"  ng-focus="focusIn()" ng-blur="focusOut()"></div>

现在我希望每当文本框获得焦点时，然后概述 div。为此，我在 app.js 中创建了这两个函数，但不幸的是，我什至没有得到哪个元素调用了这个函数。

$scope.focusIn = function(event){
    console.log('Focussed :)'+event);
  }
   $scope.focusOut = function(){
    console.log('Out of focus :(');
  }

拜托，帮帮我。

Answer 1

您可以在调用函数时传递事件

<input type="text" class="input-field clearfix email" ng-focus="focusIn($event)" ng-blur="focusOut($event)"/>

在你的控制器中你可以获得获得焦点的元素的父元素

$scope.focusIn = function($event){
    angular.element($event.target).parent().addClass('focus');
};

$scope.focusOut = function($event){
    angular.element($event.target).parent().removeClass('focus');
};

演示：http://jsfiddle.net/jkrielaars/9mce1em1/1/

Answer 2

使用 CSS 是一种简单的方法来做你想做的事，而不是使用一些 javascript 代码，angular 有允许你像 ng-class。例如，当您将焦点放在文本框上时，您可以将该操作绑定到一个布尔变量并使用我之前在 div 中提到的指令，您可以轻松获得良好的结果。首先尝试了解 AngularJS 中提供的内容，当您找不到所需的内容时，然后尝试自己解决方案，AngularJS 实施了许多好的指令。在 CSS 文件中你可以有这样的：

.div-outlined{ border: solid 2px red; }

在 html 中有些像这样：

<div id="containerdiv" ng-class="{'div-outlined': textboxfocus === true}">
  <input type="text" ng-focus="textboxfocus = true"/>
</div>

希望对您有所帮助

当文本框使用 angularjs 获得焦点时如何为其父级设置轮廓

How to set outline to its parent when textbox get focussed using angularjs

textbox

angularjs