Размытие поля ввода при нажатии клавиши Angular

Я нашел этот вопрос очень полезным для отправки формы, когда кто-то нажимает клавишу "enter":

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:

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

То, что я хотел бы знать, это установить размытие поля при нажатии клавиши "enter". Как бы выглядеть doSomething(), чтобы размыть поле отправителя?

Я хотел бы оставить директиву ngEnter как есть, так как я хотел бы повторно использовать ее для других функций.

Обновление: Я знаю, что могу создать целую директиву только для размытия (так, как у меня сейчас), но то, что я хотел бы сделать, это сделать что-то вроде этого:

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

Или как передать текущий элемент в качестве параметра?

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

Ответ 1

Пробуя кучу вещей, это кажется невозможным, так как вам нужно передать $event для получения целевого элемента, поэтому отдельная директива кажется единственным способом:

Что мы хотим:

Вы не можете передать this, потому что это относится к области, поэтому вам нужно передать событие.

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

Как только у вас есть событие, вы можете получить от него цель.

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

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

Но вы можете получить событие pass только в директиве типа ng-click... kinda неудовлетворительно. Если бы мы могли передавать директиву за пределами $event, мы могли бы размыться в том многократно используемом вами запросе.

Ответ 2

SoluableNonagon был очень близок к этому. Вам просто нужно использовать правильный аргумент. Директива объявила параметр события как event not $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>

Ответ 3

для углового 2+

<input ... (keydown.enter)='$event.target.blur()'>