-
-
Save eliotsykes/5394631 to your computer and use it in GitHub Desktop.
| 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}); | |
| }); | |
| }); | |
| } | |
| }]); |
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>
this doesn't work, at all
@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.
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?
Does this work calling a javascript function like:
?
No
Haven't checked cross browser but these directives work for me. Thanks!
how do you access the "event" object?
works great, thank you!!!
Its not working when i trying into jsbin.com......... why ??
please give me solution ... its tell me to use dot notaion.
This is exactly what I was looking for, thanks
FYI
ngBlur and ngFocus have been released in master since.
http://docs.angularjs.org/api/ng/directive/ngBlur
http://docs.angularjs.org/api/ng/directive/ngFocus
Love the code! Very simple yet powerful! :)
they are working on window tag only not on other elements
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>
Why not just do?
<input type="text" ng-focus="focus = true" ng-blur="focus = false" id="query" ng-model="query"/>
<h1>{{focus}}</h1>
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 });
});
});
}
};
}());
@eliotsykes : Can I call a function on this blur event.
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 ?