Angularjs的鍵盤事件的綁定
Angularjs的鍵盤事件的綁定
推薦button
方法一:ng內(nèi)置指令
<button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid"> 登錄 </button>
說(shuō)明:在對(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)敲回車登錄的功能,不過(guò)推薦指令的方式,對(duì)$scope的污染比較低
關(guān)于AngularJS指令事件可以參考:http://www.dbjr.com.cn/article/119742.htm
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例
- Angularjs 事件指令詳細(xì)整理
- angular中實(shí)現(xiàn)li或者某個(gè)元素點(diǎn)擊變色的兩種方法
- AngularJS點(diǎn)擊添加樣式、點(diǎn)擊變色設(shè)置的實(shí)例代碼
- Angular通過(guò)angular-cli來(lái)搭建web前端項(xiàng)目的方法
- Angular中自定義Debounce Click指令防止重復(fù)點(diǎn)擊
- 詳解angularjs獲取元素以及angular.element()用法
- Angular指令之restict匹配模式的詳解
相關(guān)文章
angularJS自定義directive之帶參方法傳遞詳解
今天小編就為大家分享一篇angularJS自定義directive之帶參方法傳遞詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10AngularJS基礎(chǔ) ng-mouseover 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-mouseover 指令,這里幫大家整理了AngularJS 指令的基礎(chǔ)知識(shí),并附代碼示例,有興趣的小伙伴可以參考下2016-08-08在 Angular6 中使用 HTTP 請(qǐng)求服務(wù)端數(shù)據(jù)的步驟詳解
本文分步驟給大家介紹了在 Angular6 中使用 HTTP 請(qǐng)求服務(wù)端數(shù)據(jù)的方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08angularJS實(shí)現(xiàn)動(dòng)態(tài)添加,刪除div方法
下面小編就為大家分享一篇angularJS實(shí)現(xiàn)動(dòng)態(tài)添加,刪除div方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05angularjs過(guò)濾器--filter與ng-repeat配合有奇效
本篇文章主要介紹了angularjs過(guò)濾器-filter與ng-repeat的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04AngularJS基礎(chǔ) ng-model-options 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-model-options 指令,這里對(duì)ng-model-options指令的基本資料進(jìn)行整理,有需要的小伙伴可以參考下2016-08-08AngularJS實(shí)現(xiàn)表單元素值綁定操作示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)表單元素值綁定操作,結(jié)合具體實(shí)例形式分析了AngularJS針對(duì)表單元素屬性相關(guān)操作技巧,需要的朋友可以參考下2017-10-10Angular中使用$watch監(jiān)聽(tīng)object屬性值的變化(詳解)
下面小編就為大家?guī)?lái)一篇Angular中使用$watch監(jiān)聽(tīng)object屬性值的變化(詳解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04