Develop Reference

ngblur and enter event : why on enter key two http calls go?

I have a form in which I have enter-key press event and ng-blur. It's like when a user enters something and click elsewhere the form is submitted similarly if a user writes something and press enter the form is submitted and API call goes.
Problem Statement
It works fine on ng-blur only a single call goes to the API. But when I try to use key event two calls go. That's why two success messages show. I don't know why but it acting like that.
Form
input ng-model="cusBoard.boardData.musicalWorkName"
id="superTitleInput" class="title-edit-input superTitle-input" type="text"
maxlength="50"
my-key-enter="cusBoard.updateInfo()"
ng-blur="cusBoard.updateInfo()">
My-key-enter Directive
app.directive('myKeyEnter', function () {
return {
controller: 'SignInController',
link: function (scope, elements, attrs) {
elements.bind('keydown keypress', function (event) {
if (event.which === 13) {
scope.$apply(function () {
scope.$eval(attrs.myKeyEnter);
});
event.preventDefault();
}
});
}
}
controller function
function updateInfo(){
editable('superTitle',0);
var params = {
superTitle : cusBoard.boardData.musicalWorkName,
boardId : cusBoard.boardData._id
};
CastingBoard.updateSuperTitle(params).then(function (res) {
if (res.msgCode === '405') {
$mdToast.show($mdToast.simple().textContent("Board title updated successfully.").position('bottom right'));
}
});
}

You're binding to both the keydown and keypress events:
elements.bind('keydown keypress', function (event) {
Both events are fired for the Enter key, so the handler is executed twice.
Just pick one, or the other.

Angular directive to pass a attribute on one textbox to another div button

I have one textbox which has some attributes.
<input type="text" code=1 add-Me>
And I have one div which is hidden at first.
<div ng-show="hideMe">
<input type="button" onclick="GetElements(code);">
</div>
So my question here is, I want to make a directive on a click of F2(when the focus is on textbox ), I want to open that hidden div and focus on that button inside div and pass the textbox attribute on that button click.
So far I have made an attribute:
app.directive('addMe', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
// console.log(scope.$parent.data.name);
if (event.which === 113) {
// What to do now??
}
});
};
});
Can someone help me? Thank you.

I've faced a similar scenario while working with a modal. I came up with a solution using $rootScope. You can call a function while a user changes the first input --
<input type="text" code=1 onclick/onchange="setValueToRootScope(code)">
Now, in your GetElements() function, check the value of the $rootScope.ur_variable and perform operation accordingly.

You can do something like this,
In your JS:
app.directive('addMe', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
// console.log(scope.$parent.data.name);
if (event.which === 113) {
$scope.codeVar=element.getAttribute("code");
$scope.hideMe=true;
}
});
};
});
Your div will be displayed since the variable "hideMe" has been set to true.
And the value of your code attribute as well is stored in the "codeVar" variable in the $scope so that it can be accessed in that particular controller's scope.
In the HTML part:(If your GetElements function is under your controller's scope)
<div ng-show="hideMe">
<input type="button" ng-click="GetElements(codeVar);">
</div>

How to unbind an keyboard short cut events in angular js

I created an angular directive that binds the keyboard short cut. However, once this is bind, it keeps the binding for all other divs. But i have attached only to one div. How do i unbind it after it executes and re bind when the user clicks within that div.
ex:
angular.module('Dummy').directive('keypressEvents',
function ($document, $rootScope) {
return {
restrict: 'A',
link: function () {
$document.bind('keydown', function (e) {
if ((e.which == '115' || e.which == '83' ) && (e.ctrlKey || e.metaKey)){
$rootScope.$broadcast('Ctrl+s');
}
});
}
} });
in controller
$rootScope.$on('Ctrl+s', function (e) {
$scope.$apply(function () {
$scope.doDummyAction();
});
});
in html
<div keypress-events>this is a div that binds keyboard shortcut</div>
<div>Another div which doesn't need a short cut key</div>
Appreciate any suggestions.

Don't use $document. The link function gets a scope and the element it's applied to passed to it.
link: function(scope, iElem){
iElem.bind(...
}
When you bind to the document it is listening to events that bubble out the document (page). If you just bind to the element itself you'll only get the event handler triggered when that element has focus and the event occurs.

How to keypress in AngularJS

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.
Keydown
$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>

Angular keydown directive

I haven't found a solution for this problem. I need to by pressing the spacebar do some actions with the selected item. All solutions were made ​​using input. Any idea how to improve this code? For example don't use jQuery?
Directive:
app.directive('space', function () {
return function (scope, elm, attrs) {
$('body').keydown(function (e) {
if (e.keyCode == 32) {
console.log(e);
// Actions with data
}
})
}
});
Html:
<div class="col-md-12" ng-controller="ReceiptCtrl" space>
// My page
</div>
Ok. I need highlight element by clicking and then in any part of my page by keydown spacebar do something with highlighted element. ng-keydown, ng-keypress and etc. not want to work. Code that i wrote above work fine but it's look awful, I think.

elm.onkeydown = function(e)
{
if(e.keyCode == 32)
// Do some actions
};