Skip to content

Instantly share code, notes, and snippets.

@eliotsykes

eliotsykes/ngFocusAndBlur.js

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.
Download ZIP
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).
Raw
ngFocusAndBlur.js
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});
});
});
}
}]);
@sowmi546
Copy link

sowmi546 commented Dec 14, 2016 •
edited
Loading 

 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 •
edited
Loading

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