What is the replacement of jQuery's blur event in AngularJS?

Question

I have to close any opened component when clicking outside of that component using angularjs. Is there an angular directive for blur events? If not, how can I do that?

The first answer is corrrect, but I'd like to note that this isn't a jqury event, it's a javascript event. If you want to get really good t client side programming, try to find out what jquery does under the hood — bigblind, Jul 31 '13 at 07:36

score 25 · Answer 1 · answered Jul 31 '13 at 10:37

25

If you don't want to use angular-ui's ui-event, you can also create a small directive until the next version of Angularis released.

app.directive('ngBlur', function() {
  return function( scope, elem, attrs ) {
    elem.bind('blur', function() {
      scope.$apply(attrs.ngBlur);
    });
  };
});

Just put the directive where you need it:

<input type="text" ng-model="foo" ng-blur="doFoo()" />

Basically what the directive does is to bind the blur event of the element (in our example the input) and then when the event is fired (we leave the input) angular will apply what is in the directive. So in our case, doFoo() will be fired if we leave the input.

Plunker here: http://plunker.co/edit/J4ZEB6ppvkiIvdW9J2VU?p=preview

answered Jul 31 '13 at 10:37

Jesus Rodriguez

11,918
9
64
88

1

Hey Jesus, when I add this to my code it says `Uncaught ReferenceError: app is not defined` wtf? – pythonian29033 Oct 07 '13 at 14:11
ng-blur does not work with the stable version, the very latest, unstable version must be used – pythonian29033 Oct 07 '13 at 14:53
1

`app` is just a reference to my module. use `angular.module('yourmodule').directive...`. Angular 1.2 comes with a blur directive so this is for 1.0.x or 1.1.x – Jesus Rodriguez Oct 07 '13 at 16:40
I did that, don't worry man, posted a question and got my own solution, thanks – pythonian29033 Oct 08 '13 at 13:34

JQuery Guru · Answer 2 · 2013-09-20T11:49:09.483

7

You can use Angular UI @ http://angular-ui.github.io/ui-utils/ which provide Blurs, Focus, Double-Clicks event or Bind a callback to any event not natively supported by Angular Js

Below is one of the example of blur event:

<input ui-event="{ blur : 'blurCallback()' }">

<script>
$scope.blurCallback = function() {
alert('Goodbye');
};
</script>

edited Sep 20 '13 at 11:49

answered Jul 31 '13 at 07:27

JQuery Guru

6,943
1
33
40

sir am using it in my app but ui-event is fire before model value change. i am calling function test(ng-model) on ui-event={blur:} in function it will show me old value and also at first time undefined – Amit Rana Nov 30 '13 at 06:56

Walter Roman · Answer 3 · 2015-06-26T23:34:47.800

4

As of Angular 1.2.24*, there is an ng-blur directive.

// View
<input 
    type="text"
    placeholder="Hello World!"
    ng-model="foo.bar"
    ng-blur="onBlur($event)"
    >

// Controller
$scope.onBlur = function($event) {
    return $event;
}

* I don't know in which Angular version ng-blur was introduced.

edited Jun 26 '15 at 23:34

answered Sep 14 '14 at 02:28

Walter Roman

4,621
2
32
36

score 1 · Answer 4 · answered Nov 19 '13 at 15:06

The native ng-blur "Doesn't work at all in latest unstable. :(" http://docs.angularjs.org/api/ng.directive:ngBlur

Yo can fix this following the steps of this post "There is no direct support for blur event in AngularJs. But we can add support for blur event by creating directive." http://coding-issues.blogspot.in/2013/10/angularjs-blur-directive.html

score 0 · Answer 5 · answered Jul 31 '13 at 07:35

Directives supporting focus and blur events will be included in the next AngularJS release (reference), which should be out soon (my guess is within the next month). If you can't wait, like JQueryGuru suggested, you can use the uiEvent directive from the AngularUI project.

What is the replacement of jQuery's blur event in AngularJS?

5 Answers5