Skip to content

Instantly share code, notes, and snippets.

@eliotsykes
Created April 16, 2013 09:27
Show Gist options
  • Save eliotsykes/5394631 to your computer and use it in GitHub Desktop.
Save eliotsykes/5394631 to your computer and use it in GitHub Desktop.
AngularJS ngFocus and ngBlur directives - one way to get them before they get released. Before using, consider re-naming ngFocus and ngBlur to something that doesn't invade the ng namespace, e.g. replace all 'ngFocus' and 'ngBlur' strings with 'ngcFocus' and 'ngcBlur' (where c = cats/custom).
app.directive('ngFocus', ['$parse', function($parse) {
return function(scope, element, attr) {
var fn = $parse(attr['ngFocus']);
element.bind('focus', function(event) {
scope.$apply(function() {
fn(scope, {$event:event});
});
});
}
}]);
app.directive('ngBlur', ['$parse', function($parse) {
return function(scope, element, attr) {
var fn = $parse(attr['ngBlur']);
element.bind('blur', function(event) {
scope.$apply(function() {
fn(scope, {$event:event});
});
});
}
}]);
Copy link

ghost commented Jun 26, 2013

Hello, Sorry but I'm new on AngularJS, can you explain how does your ngFocus work and how use it in an HTML tag please ?

@designingsean
Copy link

@kaipierre:

You would use these on the element that is either receiving the focus or being blurred. When either event occurs, it will fire the expression. For instance

<input ng-focus="isFocused=true" ng-blur="isFocused=false">

would change $scope.isFocused as that particular input receives and loses focus.

Note that you can also use this on non-form elements like divs, as long as you give those elements a tabindex. For example:

<div ng-focus="isFocused=true" ng-blur="isFocused=false" tabindex="1">...</div>

@thebigredgeek
Copy link

this doesn't work, at all

@designingsean
Copy link

@rhyneandrew:

http://jsfiddle.net/designingsean/MS84E/

Note that you need to load jQuery, and do it BEFORE you load Angular. The jQlite that is included with Angular does not have the .focus() or .blur() events included, thus the need for jQuery.

@michael-kmv
Copy link

How to use it in case when I have
<tr ng-repeat="offr in offers">
<td ng-bind-html-unsafe="offr.offer">{{offr.offer}}</td>
</tr>
where offr.offer are strings like <input ng-focus="hasFocus=true" ng-blur="hasFocus=false"/>
Cab you show example?

@johan-rodriguez-araya
Copy link

Does this work calling a javascript function like:

?

@michael-kmv
Copy link

No

@theninthnode
Copy link

Haven't checked cross browser but these directives work for me. Thanks!

@alextse
Copy link

alextse commented Sep 5, 2013

how do you access the "event" object?

@keeth
Copy link

keeth commented Sep 26, 2013

works great, thank you!!!

@akshaypingle88
Copy link

Its not working when i trying into jsbin.com......... why ??
please give me solution ... its tell me to use dot notaion.

@bulv1ne
Copy link

bulv1ne commented Mar 2, 2014

This is exactly what I was looking for, thanks

@mchambaud
Copy link

@c0debreaker
Copy link

Love the code! Very simple yet powerful! :)

@bassemZohdy
Copy link

they are working on window tag only not on other elements

@sowmi546
Copy link

sowmi546 commented Dec 14, 2016

 Hi @eliotsykes Can you please review this and let me know what I am missing here. I am not able to get it working.



<html>
<head>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/jquery-1.10.1.min.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  

    </head>
<body>
<div ng-app="app">
<div ng-controller="focusCtrl">
<input ng-focus="hasFocus=true" ng-blur="hasFocus=false"/>
<p>Input focus: {{hasFocus}}</p>
</div>
</div>
</body>
<script>
  function focusCtrl($scope) {
  $scope.hasFocus=false;
 }
  angular.module('app', []).directive('ngFocus', ['$parse', function($parse) {
        return function(scope, element, attr) {
        var fn = $parse(attr['ngFocus']);
        element.on('focus', function(event) {
        scope.$apply(function() {
            fn(scope, {$event:event});
        });
    });
   };
 }]);
 .directive('ngBlur', ['$parse', function($parse) {
  return function(scope, element, attr) {
    var fn = $parse(attr['ngBlur']);
    element.on('blur', function(event) {
        scope.$apply(function() {
            fn(scope, {$event:event});
        });
    });
    };
}]);  
</script>
</html>

@onigetoc
Copy link

onigetoc commented Apr 11, 2017

Why not just do?

<input type="text" ng-focus="focus = true" ng-blur="focus = false" id="query" ng-model="query"/>
<h1>{{focus}}</h1>

@pwharff
Copy link

pwharff commented Feb 23, 2018

I'm using a much earlier version of Angular and couldn't upgrade without extensive testing, so I really needed this. It worked perfectly, thank you.

Here's my modified version. Enjoy!

(function () {
    'use strict';

    angular
        .module('yournamespacehere')
        .directive('ngOnBlur', ngOnBlur);

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

    // A directive for mimicking ngBlur (which is now released but requires update)
    function ngOnBlur($parse) {
        return function (scope, element, attr) {
            var fn = $parse(attr['ngOnBlur']);
            element.bind('blur', function (event) {
                scope.$apply(function () {
                    fn(scope, { $event: event });
                });
            });
        }
    };
}());

@dny7737
Copy link

dny7737 commented Mar 9, 2018

@eliotsykes : Can I call a function on this blur event.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment