Javascript 角接退格压力机

我正试图通过

ngKeypress

、

ngkeypdown

和

ngkeypup

捕捉

backspace

按键，然后提问

这是我的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>

我尝试过在

ngKeypress

、

ngKeydown

和

ngkeydup

之间进行替换，但都不起作用

完整代码： html

在控制器中 我为您的代码编写了一个干净的示例，它似乎很有效

JavaScript:

HTML:

JSFiddle:

---

在指令中 如果要将

封装到指令中，可以使用以下代码：

HTML:

JavaScript:

angular.module（'myApp'，[]）
.controller（'TestController'，['$log'，TestController]）
.directive（'testElement'，['$log'，testElement]）；
函数TestController（$log）{
$log.log（“控制器已加载”）；
}
函数testElement（$log）{
返回{
限制：'E'，
模板：“”，
链接：功能（范围）{
scope.changeInput=函数（e）{
$log.log（'scope'，scope）；//scope
$log.log（e）；//适用于任何其他密钥
如果（如keyCode===8）{
//退格键码
$log.log（'backspace'）；
}
}
}
};
}

---

jsiddle:

发生了什么？函数是否被调用？输出是什么？注意，甚至不是changeInput函数。发布整个代码。同时添加控制器？如果您调用了指令isrTextField，为什么我在html代码中看不到任何对isr文本字段的引用？如果我想将其保留在指令中（使其更干净），还有其他选项吗？@Itsikmauy我添加了一个简单的解决方案，我把代码移到了指令中。

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

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

})();

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

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

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

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