Angularjs的键盘事件的绑定
更新时间：2017年07月27日 14:38:59 作者：奋进的小莫
这篇文章主要介绍了Angularjs的键盘事件的绑定的相关资料,这里提供了两种方法，1.ng内置指令，2.自定义指令，并进行比较，需要的朋友可以参考下
Angularjs的键盘事件的绑定
推荐button
方法一：ng内置指令
<button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid"> 登录 </button>
说明：在对应的控制器中的$scope上绑定一个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();
}
});
};
});
总结：两种方法都能实现敲回车登录的功能，不过推荐指令的方式，对$scope的污染比较低
关于AngularJS指令事件可以参考：https://www.jb51.net/article/119742.htm
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
angularJS自定义directive之带参方法传递详解
今天小编就为大家分享一篇angularJS自定义directive之带参方法传递详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
AngularJS基础 ng-mouseover 指令简单示例
本文主要介绍AngularJS ng-mouseover 指令,这里帮大家整理了AngularJS 指令的基础知识,并附代码示例,有兴趣的小伙伴可以参考下2016-08-08
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
本文分步骤给大家介绍了在 Angular6 中使用 HTTP 请求服务端数据的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
下面小编就为大家分享一篇angularJS实现动态添加,删除div方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
本篇文章主要介绍了angular实现IM聊天图片发送实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
angularjs过滤器--filter与ng-repeat配合有奇效
本篇文章主要介绍了angularjs过滤器-filter与ng-repeat的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
AngularJS基础 ng-model-options 指令简单示例
本文主要介绍AngularJS ng-model-options 指令,这里对ng-model-options指令的基本资料进行整理,有需要的小伙伴可以参考下2016-08-08
这篇文章主要给大家介绍了关于angular共享依赖解决方案的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了AngularJS实现表单元素值绑定操作,结合具体实例形式分析了AngularJS针对表单元素属性相关操作技巧,需要的朋友可以参考下2017-10-10
Angular中使用$watch监听object属性值的变化(详解)
下面小编就为大家带来一篇Angular中使用$watch监听object属性值的变化(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
最新评论