Blur an input field on keypress enter on Angular

Question

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

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> 

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?

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

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

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

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.