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 expression,这里整理了详细的资料，并附示例代码，有兴趣的小伙伴可以参考下2016-09-09
这篇文章主要介绍了浅析AngularJs HTTP响应拦截器的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了Angularjs之filter过滤器的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2016-11-11
angular6根据environments配置文件更改开发所需要的环境的方法
这篇文章主要介绍了angular6根据environments配置文件更改开发所需要的环境的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了angularjs http与后台交互的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
本篇文章主要介绍了Angular 5 给组件本身的标签添加样式class的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
angularjs在ng-repeat中使用ng-model遇到的问题
本文给大家分享了一个个人在使用angular过程中遇到的在ng-repeat中使用ng-model的问题，并附上简单的解决办法，希望能对大家学习angular有所帮助2016-01-01
这篇文章主要记录了一些在学习和使用angular.js踩到的坑和需要注意的点，方便以后自己查阅，也给同样遇到这些问题的朋友们一些帮助，有需要的朋友们下面来一起看看吧。2016-10-10
解决angularjs WdatePicker ng-model的问题
今天小编就为大家分享一篇解决angularjs WdatePicker ng-model的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
AngularJs Understanding the Controller Component
本文主要介绍AngularJs Understanding the Controller Component的内容,这里整理了相关资料，及简单示例代码，有兴趣的小伙伴可以参考下2016-09-09
最新评论