Created
April 16, 2013 09:27
-
-
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).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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}); | |
| }); | |
| }); | |
| } | |
| }]); |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
they are working on window tag only not on other elements