-
-
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}); | |
| }); | |
| }); | |
| } | |
| }]); |
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.
No