在Angular上的按键输入上模糊输入字段

I found this question very useful for submitting a form when someone presses the "enter" key:

当有人按下“回车”键时，我发现这个问题对于提交表格非常有用：

Javascript:

使用Javascript：

angular.module('yourModuleName').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': event});
                });

                event.preventDefault();
            }
        });
    };
});

HTML:

HTML：

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    
</div>

What I would like to do know, is to set the field to blur when the "enter" key is pressed. What would doSomething() look like to blur the sender field?

我想知道的是，当按下“enter”键时，将字段设置为模糊。什么doSomething（）看起来模糊发件人字段？

I would like to leave the ngEnter directive as it is, since I would like to re-use it for other functions.

我想保留ngEnter指令，因为我想将它重新用于其他功能。

Update: I know I can create a whole directive just for blurring (that's how I have it now), but what I'd like to do is be able to do something like this:

更新：我知道我可以创建一个完整的指令只是为了模糊（这就是我现在的方式），但我想做的是能够做这样的事情：

<input type="text" ng-enter="this.blur()">

Or how do I pass the current element as a parameter?

或者如何将当前元素作为参数传递？

<input type="text" ng-enter="doBlur(this)">

2 个解决方案

#1

After trying a bunch of things, this is seems not possible, as you would need to pass $event to get the target element, so separate directive seems to be the only way to go:

在尝试了很多东西后，这似乎是不可能的，因为你需要传递$ event来获取目标元素，所以单独的指令似乎是唯一的方法：

What we desire:

我们想要什么：

You cannot pass this because it refers to the scope, so you need to pass the event.

您无法传递此信息，因为它引用了范围，因此您需要传递事件。

<input type="text" ng-enter="doBlur($event)">

Once you have the event, you can get the target from it.

一旦你有了这个事件，你就可以从中获得目标。

$scope.doBlur = function($event){
    var target = $event.target;

    // do more here, like blur or other things
    target.blur();
}

But, you can only get pass event in a directive like ng-click ... kinda unsatisfactory. If we could pass $event outside directive, we could blur in that reusable way you requested.

但是，你只能在像ng-click这样的指令中获得传递事件......有点不满意。如果我们可以传递$ event outside指令，我们可能会以您请求的可重用方式模糊。

#2

SoluableNonagon was very close to it. You just have to use the right argument. The directive declared the event parameter as event not $event. You could change the directive to use $event just as ngClick does (Or you keep it and use it as ng-enter="doSomething(event)".

SoluableNonagon非常接近它。你只需要使用正确的参数。该指令将事件参数声明为事件而不是$ event。您可以将指令更改为使用$ event，就像ngClick一样（或者保留它并将其用作ng-enter =“doSomething（event）”）。

angular.module("app", [])
  .controller('MainController', MainController)
  .directive('myEnter', myEnter);

function MainController() {
  var vm = this;
  vm.text = '';
  vm.enter = function($event) {
    $event.target.blur();
    vm.result = vm.text;
    vm.text = '';
  }
}

myEnter.$inject = ['$parse'];

function myEnter($parse) {
  return {
    restrict: 'A',
    compile: function($element, attr) {
      var fn = $parse(attr.myEnter, null, true);
      return function(scope, element) {
        element.on("keydown keypress", function(event) {
          if (event.which === 13) {
            
            // This will pass event where the expression used $event
            fn(scope, { $event: event });
            scope.$apply();
            event.preventDefault();
          }
        });
      };
    }
  };
}

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>

<div ng-app="app" ng-controller="MainController as view">
  <input my-enter="view.enter($event)" ng-model="view.text">
  <div ng-bind="view.result"></div>
</div>

#1