Currently, I am working on a project involving angularJS and I am facing an issue with the execution of ng-blur conflicting with ng-keydown. The problem arises because ng-keydown causes the element to lose focus at a certain point.
The HTML code in question is as follows:
<div contenteditable ng-show="contentEditableSupport" ng-init="oldName = ''" ng-focus="oldName = userGroup.name" ng-model="userGroup.name" strip-br="true"
ng-blur="editName(userGroup, oldName)" ng-keydown="$event.keyCode === 13 && editName(userGroup, oldName)">{{userGroup.name}}</div>
The custom attribute directive defined for angular is:
angular.module("mainApp").directive('contenteditable', function () {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
//Code taken from: http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/editing-text-in-place-using-html5-content-editable.html
function read() {
ngModel.$setViewValue(element.html());
}
ngModel.$render = function () {
element.html(ngModel.$viewValue || "");
};
element.bind("blur keyup change", function () {
scope.$apply(read);
});
}
};
});
When editing the text within the element, clicking elsewhere triggers the editName method once. However, if the text is edited and "enter" is pressed, the method is called twice. Attempts to use $event.stopPropagation have been unsuccessful in resolving this issue.