Re: [angular.js] Re: Focus and Blur directives?

4,983 views
Skip to first unread message

Peter Bacon Darwin

unread,
Jul 9, 2012, 4:34:15 AM7/9/12
to ang...@googlegroups.com
I think you'll need to write a directive.  Here someone has done a simplistic one:  https://gist.github.com/2588075.
What are your specific requirements for these directives?
Pete

On 9 July 2012 08:48, Roy Peled <pele...@gmail.com> wrote:
anyone?


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/sxYuhgMQF7gJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Peter Bacon Darwin

unread,
Jul 9, 2012, 5:19:09 AM7/9/12
to ang...@googlegroups.com
Have you taken a look at this thread:  https://groups.google.com/forum/?fromgroups#!topic/angular/0FRrPp_EsYY 

On 9 July 2012 10:17, Roy Peled <pele...@gmail.com> wrote:
Actually I needed something more like the ng-click directive, which will allow me to attach a callback to a focus and blur event.
I really couldn't find a place that explains how to write directives from the ground up, so I'm asking here.


On Monday, July 9, 2012 11:34:15 AM UTC+3, Peter Bacon Darwin wrote:
I think you'll need to write a directive.  Here someone has done a simplistic one:  https://gist.github.com/2588075.
What are your specific requirements for these directives?
Pete


anyone?


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/sxYuhgMQF7gJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/IRWSNMB5BnYJ.

Pawel Kozlowski

unread,
Jul 9, 2012, 5:40:00 AM7/9/12
to ang...@googlegroups.com
Hi!

On Mon, Jul 9, 2012 at 11:17 AM, Roy Peled <pele...@gmail.com> wrote:
> Actually I needed something more like the ng-click directive, which will
> allow me to attach a callback to a focus and blur event.
> I really couldn't find a place that explains how to write directives from
> the ground up, so I'm asking here.

I've wrote a quick one for ngFocus in this jsFiddle, it is really
trivial: http://jsfiddle.net/xtcST/2/ responding in this thread:
https://groups.google.com/forum/#!msg/angular/iuPEnp_AYUg/IelTp6Z-se0J

Cheers,
Pawel

Pawel Kozlowski

unread,
Jul 9, 2012, 3:48:52 PM7/9/12
to ang...@googlegroups.com
Hi!

On Mon, Jul 9, 2012 at 8:55 PM, ethermal <endot...@gmail.com> wrote:
> Not trying to hi-jack the thread, but in the directive in your fiddle I see
> a problem.

Yes, sure, you are right, as noted in the thread it was just a simple
example to show how easy is to do easy stuff :-)

you have scope.$eval(attrs.ngFocus) which calls the event
> handler but doesn't pass any information to the event handler. The event
> doesn't receive any information about the event, vital information like what
> element triggered the event, etc. So how could that information which is
> known in the directive be passed to the event handler?

In fact the complete solution is _almost_ in place in angular's source
(https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js#L40),
would be great to open a pull request to add focus / blur.

The more sophisticated, custom solution would go like this (based on
the angular.js src):
http://jsfiddle.net/pkozlowski_opensource/Xbf2w/1/

In short: it would make sense to open an issue / pull request to
support focus / blur in angular.js. Otherwise it is rather easy to
implement it in a custom directive.

Cheers,
Pawel

samrec

unread,
Apr 13, 2013, 7:37:20 AM4/13/13
to ang...@googlegroups.com
This was extremely useful - found so many goodies that I would have to code myself. 

On Monday, July 9, 2012 5:15:40 AM UTC-4, Sander Elias wrote:
Hi,

Perhaps this might help:

yahya Kacem

unread,
Apr 20, 2013, 4:26:32 AM4/20/13
to ang...@googlegroups.com
Actually, a simpler solution that I'm using:
  1. Open src/libs/angular-unstable/angular.js
  2. Change the line 13963: 'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress'.split(' '),
  3. with this: 'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress focus blur'.split(' '),
Use the ngFocus(ng-focus) and the ngBlur(ng-blur) as your new directives.
Note: this is tested with angular1.1.4.

On Sunday, July 8, 2012 3:25:36 PM UTC+1, Roy Peled wrote:
Anythings about those? I can't seem to find them in the documentation.
Will I need to write a directive especially for those? If so, how?

ranadheer rannu

unread,
Oct 1, 2013, 7:59:01 AM10/1/13
to ang...@googlegroups.com
You need to create a directive to support blur in angularjs

I found a useful directive which is working fine and you can get it here : Blur event in angularJS

Jean Michel

unread,
Oct 1, 2013, 6:09:43 PM10/1/13
to ang...@googlegroups.com
This is built into recent version of angular, so no need to add it on your own unless you must use an old version of angular for some reason.

codesman angular

unread,
Nov 12, 2013, 3:12:38 AM11/12/13
to ang...@googlegroups.com
The ngBlur directive is not available in all versions so i have built a good directive on it
you can find it here   directive for ngBlur

On Wednesday, July 11, 2012 2:02:10 AM UTC+5:30, ProLoser wrote:
Crap ya the syntax changed a bit quite recently. Updating the demo right now (note to self: start creating tests).

The issue with the latest iteration is that you no longer have access to the event object, I'm trying to think of ways to re-allow this. In exchange, multiple keypresses are supported (CTRL+SHIFT+E) etc.

On Tuesday, July 10, 2012 6:45:40 AM UTC-7, ethermal wrote:
Also noticed the blur and focus events on your demo page do not work for me in any browser.   http://angular-ui.github.com/index.html
'
So I downloaded and tested your latest build and the blur event is called/triggered however it doesn't pass the event as a parameter as your example appears to demonstrate. 

$scope.blurCallback = function(e) {
alert('Hello there');
};

e is undefined, should be the event 



On Monday, July 9, 2012 6:21:02 PM UTC-4, ProLoser wrote:
Thanks Sander! Ya I was actually going to say we already support this in AngularUI. You guys should come check it out, we try to add anything that isn't natively in AngularJS that we feel would help, in addition to other common problems people tackle.

We're also constantly looking for more core contributors so if you guys end up developing your own solutions feel free to submit them!
Reply all
Reply to author
Forward
0 new messages