javascript - angular - catch 退格键

Question

我正在尝试通过 ngKeypress、ngKeydown 和 ngKeyup 来捕捉 backspace 键，follwing How can I detect keydown or keypress问题。

这是我的 HTML:

<input 
       name="inputText" 
       type="text" 
       class="{{schema.class.control_part_class}} form-control" 
       data-ng-model="data[schema.model]"
       ng-keydown = "changeInput($event)">
</input>

和指令链接函数:

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') 
     }     
};

我已经尝试在 ngKeypress、ngKeydown 和 ngKeyup 之间进行替换，但它们都不起作用。

完整代码:html

<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>

指令:

(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);

})();

Answer 1

在 Controller 中

我为您的代码写了一个干净的示例，它似乎可以工作。

JavaScript:

angular.module('myApp', [])
  .controller('TestController', TestController);

function TestController($scope, $log) {
  $scope.changeInput = function(e) {
    $log.log('scope', $scope); //scope
    $log.log(e); //works for any other key
    if (e.keyCode === 8) {
      //keycode for backspace
      $log.log('backspace');
    }
  };
}

HTML:

<div ng-controller="TestController as test">
  <input name="inputText"
         type="text"
         ng-keyup="changeInput($event)">
</div>

JSFiddle:http://jsfiddle.net/wcws0ubm/1/

---

在指令中

如果要封装<input>到一个指令，你可以使用下面的代码:

HTML:

<div ng-controller="TestController as test">
  <test-element></test-element>
</div>

JavaScript:

angular.module('myApp', [])
  .controller('TestController', ['$log', TestController])
  .directive('testElement', ['$log', testElement]);

function TestController($log) {
  $log.log("Controller loaded");
}

function testElement($log) {
  return {
    restrict: 'E',
    template: '<input name="inputText" type="text" ng-keyup="changeInput($event)">',
    link: function(scope) {
      scope.changeInput = function(e) {
        $log.log('scope', scope); //scope
        $log.log(e); //works for any other key
        if(e.keyCode === 8) {
          //keycode for backspace
          $log.log('backspace');
        }
      }
    }
  };
}

JSFiddle:http://jsfiddle.net/wcws0ubm/3/