I am attempting to detect the backspace key press using ngKeypress, ngKeydown, and ngKeyup, inspired by this question on Stack Overflow.
Below is the HTML code snippet:
<input
name="inputText"
type="text"
class="{{schema.class.control_part_class}} form-control"
data-ng-model="data[schema.model]"
ng-keydown="changeInput($event)">
</input>
And here is the directive link function:
scope.changeInput = function(e){
$log.log('scope', scope); //scope
$log.log('cont', controller); //controller
$log.log(e); //works for any other key
if(e.keyCode === 8){
//keycode for backspace
$log.log('backspace')
}
};
I have tested with ngKeypress, ngKeydown, and ngKeyup, but none of them has been successful.
Full code snippet:
<div form-field-injector schema="vm.schema" data="vm.data">
<span class="star-color-red" ng-show="schema.validation.required">*</span>
<label class="{{schema.class.label_part_class}} label-control">{{::schema.name}}
</label>
<input
name="inputText"
type="text"
class="{{schema.class.control_part_class}} form-control"
data-ng-model="data[schema.model]"
data-ng-model-options="{ debounce: 300 }"
data-ng-disabled="{{::schema.disabled}}"
ng-keydown="changeInput($event)"></input>
directive:
(function () {
'use strict';
function IsrTextField($log, $compile, $templateRequest) {
$log = $log.getInstance('IsrTextField.directive', true);
$log.debug("load()");
var _templateUrl = 'common/directives/isr-text-field/templates/isr.text.field.tpl.html';
var _inputElement = null;
function _link(scope, iElem, iAttrs, controller) {
$log.log('scope input', scope);
function _onBlur() {
$log.debug("_onBlur()");
controller.eventRunner(controller.schema.events.on_blur.action, {
item: controller.schema.events.on_blur.args
});
}
scope.changeInput = function(e){
$log.log('scope', scope); //scope
$log.log('cont', controller); //controller
$log.log(e); //works for any other key
if(e.keyCode === 8){
//keycode for backspace
$log.log('backspace')
}
};
//1. request template from server
// Load the html through $templateRequest
$templateRequest(_templateUrl)
.then(function success(html) {
// Convert the html to an actual DOM node
var template = angular.element(html);
// Append it to the directive element
iElem.append(template);
// 1. get input element from template
_inputElement = $('.form-control', iElem);
if (!_inputElement) {
$log.warn("there is no .form-control element class");
return;
}
// set template attributes from schema (before compile)
if (controller.schema.modelOptions) {
_inputElement.attr("data-ng-model-options", controller.schema.modelOptions);
}
// set events/bind from schema
if (controller.schema.events && controller.schema.events.on_blur) {
if (controller.schema.events.on_blur.action) {
_inputElement.on('blur', _onBlur);
}
}
// And let Angular $compile it
$compile(template)(scope);
}, function failure(error){
$log.error(error);
});
// cleanup
scope.$on('$destroy',
function destroy() {
$log.debug("destroy()");
if (_inputElement) {
_inputElement.off('blur', _onBlur);
_inputElement = null;
}
});
}
var directive = {
restrict: 'EA',
scope: {
schema: '=',
data: '='
},
controller: 'isrTextFieldController',
controllerAs: 'vm',
bindToController: true,
link: _link
};
return directive;
}
angular
.module('common')
.directive('isrTextField', IsrTextField);
})();