I have the following code:
index.html:
<a href="" class=”buttonone" ng-click="tool.disc()">
<i class=”buttonone"></i>
</a>
controller.js:
angular.module(’app')
How can I make so that when someone presses a keystroke example 'enter key' the tool.disc() method gets triggered? I suppose I can use angularjs ngKeydown directive but I dont know how to implement it in the code example above. Could someone try to help? Thanks!
You cannot directly call the function specifically on Enter key press, use a function to check if the Enter key is pressed and then call your function.
You cannot listen Keypress event on anchor.
HTML:
<input type="text" ng-keypress="myFunc(e)" />
<!-- ^^^^^^^^^^^^^^^^^^^^^^^ -->
<i class=”buttonone"></i>
Controller:
$scope.myFunc = function (event) {
if (event.keyCode === 13) {
console.log('Enter key pressed');
$scope.tool.disc(); // Call your function here
}
};
The element needs to be in focus to work. To make this example work you will need to click the link and then press a key.
<a href="" ng-keydown="keydown($event)">Keydown</a>
$scope.keydown = function (event) {
if (event.keyCode === 13) {
console.log('Enter key pressed');
}
};
To auto focus on the element once loaded you could use
element[0].focus()
Otherwise, consider the follow:
$document.addEventListener('keyup', function (e) { console.log(e) })
ng-keypress or ng-keydown can do the trick :
<div ng-keypress="yourFunction($event)> </div>
And then in your function, you can test the code of the key with
$event.keyCode;
For example, if you want to chech on enter :
$scope.yourFunction = function(event){
if(event.keyCode == 13){
console.log("Enter press");
}
}
Edit :
Because sometime it doesn't work as much as angular wanted it, there is a directive :
app.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();
}
});
};
});
Here this one is for enter, you can change the keycode if you need. To use it you can simply do this in every element :
<a href="" class="buttonone" ng-enter="function()" ng-click="tool.disc()">
<i class=”buttonone"></i>
</a>
