angularjs - ng-change

Desenfocar un campo de entrada al presionar una tecla entrar en Angular

Question

Encontré esta pregunta muy útil para enviar un formulario cuando alguien presiona la tecla "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>

Lo que me gustaría saber es configurar el campo para que se vea borroso cuando se presiona la tecla "enter". ¿Qué aspecto tendría Algo doSomething() para desenfocar el campo del remitente?

Me gustaría dejar la directiva ngEnter tal como está, ya que me gustaría reutilizarla para otras funciones.

Actualización : Sé que puedo crear una directiva completa solo para desenfocar (así es como la tengo ahora), pero lo que me gustaría hacer es poder hacer algo como esto:

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

¿O cómo paso el elemento actual como parámetro?

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

Answer 1

Después de probar un montón de cosas, parece que esto no es posible, ya que necesitaría pasar $ event para obtener el elemento de destino, por lo que la directiva separada parece ser la única manera de proceder:

Lo que deseamos:

No puede pasar this porque se refiere al alcance, por lo que necesita pasar el evento.

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

Una vez que tenga el evento, puede obtener el objetivo de él.

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

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

Pero, solo puede obtener un evento de aprobación en una directiva como ng-click ... un poco insatisfactorio. Si pudiéramos aprobar $ evento fuera de la directiva, podríamos difuminar la manera reutilizable que solicitó.

Answer 2

para Angular 2+

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

Answer 3

SoluableNonagon estuvo muy cerca de ello. Solo tienes que usar el argumento correcto. La directiva declaró el parámetro event como event no $event . Puede cambiar la directiva para usar $event tal como ngClick hace ngClick (O lo mantiene y lo usa como 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>