如何使用angularjs設置文本框的焦點時爲其父級設置輪廓

我嘗試過自己並搜索了很多，但沒有得到明確的答案。這可能是由於我是新手到angularjs。我有這樣的文本框，這是包裹在div裏面：如何使用angularjs設置文本框的焦點時爲其父級設置輪廓

<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 :('); 
    }

請幫幫我。

來源

2015-10-07 Mandy

，當你打電話給你的函數

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

來源

2015-10-07 10:45:32 JasperZelf

謝謝巴迪。我究竟想要什麼。你能不能請我介紹一下好的資源來學習像上面的例子那樣的angularjs。 – Mandy

@Mandy：我從這些視頻中學到了很多： https://egghead.io/playlists/new-to-angular-start-here 角度文檔不錯，當然堆棧溢出可以回答你的大部分問題。 – JasperZelf

感謝兄弟的資源。 – Mandy

使用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>

我希望這可以幫助你。

來源

2015-10-07 10:56:57

好友你的代碼也做同樣的事情，但我只能接受一個。感謝您的回覆。 – Mandy

如何使用angularjs設置文本框的焦點時爲其父級設置輪廓

回答

相關問題