Angularjs的鍵盤事件的綁定

更新時(shí)間：2017年07月27日 14:38:59 作者：奮進(jìn)的小莫

這篇文章主要介紹了Angularjs的鍵盤事件的綁定的相關(guān)資料,這里提供了兩種方法，1.ng內(nèi)置指令，2.自定義指令，并進(jìn)行比較，需要的朋友可以參考下

Angularjs的鍵盤事件的綁定

推薦button

方法一：ng內(nèi)置指令

<button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid">
 登錄
</button>

說明：在對(duì)應(yīng)的控制器中的$scope上綁定一個(gè)todoSomething方法

 $scope.todoSomething=function($event){
   if($event.keyCode==13){//回車
     login();
   }
 }

方法二：自定義指令

html
<button ng-click="login()" ng-enter="login()" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid">
 登錄
</button>

指令

myApp.directive('ngEnter', function () {
   return function (scope, element, attrs) {
     element.bind("keydown keypress", function (event) {
       if (event.which === 13) {
         scope.$apply(function () {
           scope.$eval(attrs.ngEnter);
         });
         event.preventDefault();
       }
     });
   };
 });

總結(jié)：兩種方法都能實(shí)現(xiàn)敲回車登錄的功能，不過推薦指令的方式，對(duì)$scope的污染比較低

關(guān)于AngularJS指令事件可以參考：http://www.dhdzp.com/article/119742.htm

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

AngularJs expression詳解及簡(jiǎn)單示例
本文主要介紹AngularJs expression,這里整理了詳細(xì)的資料，并附示例代碼，有興趣的小伙伴可以參考下
2016-09-09
淺析AngularJs HTTP響應(yīng)攔截器
這篇文章主要介紹了淺析AngularJs HTTP響應(yīng)攔截器的相關(guān)資料,需要的朋友可以參考下
2015-12-12
Angularjs之filter過濾器(推薦)
這篇文章主要介紹了Angularjs之filter過濾器的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法
這篇文章主要介紹了angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
angularjs http與后臺(tái)交互的實(shí)現(xiàn)示例
這篇文章主要介紹了angularjs http與后臺(tái)交互的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
Angular5給組件本身的標(biāo)簽添加樣式class的方法
本篇文章主要介紹了Angular 5 給組件本身的標(biāo)簽添加樣式class的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
angularjs在ng-repeat中使用ng-model遇到的問題
本文給大家分享了一個(gè)個(gè)人在使用angular過程中遇到的在ng-repeat中使用ng-model的問題，并附上簡(jiǎn)單的解決辦法，希望能對(duì)大家學(xué)習(xí)angular有所幫助
2016-01-01
使用Angular.js開發(fā)的注意事項(xiàng)
這篇文章主要記錄了一些在學(xué)習(xí)和使用angular.js踩到的坑和需要注意的點(diǎn)，方便以后自己查閱，也給同樣遇到這些問題的朋友們一些幫助，有需要的朋友們下面來一起看看吧。
2016-10-10
解決angularjs WdatePicker ng-model的問題
今天小編就為大家分享一篇解決angularjs WdatePicker ng-model的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
AngularJs Understanding the Controller Component
本文主要介紹AngularJs Understanding the Controller Component的內(nèi)容,這里整理了相關(guān)資料，及簡(jiǎn)單示例代碼，有興趣的小伙伴可以參考下
2016-09-09