Focus element on show

[j...@fotobabble.com]

Does anyone have an example to demonstrate how to focus on a form element when it becomes visible?

The use case is we have a read-only and edit version of a field.  When user clicks on the read-only we switch to edit version (hide read-only, show edit).  However I would like to additionally focus the cursor on the input field at this time.

I am starting to realize this may mean diving into angular directives which I haven't wrapped my head around yet.  I am eager to learn and examples help me the most.

Thanks!

-JT

[Eddie Huang]

This is involved. If html5's autofocus attribute is not enough.

The idea is to have ng-show fire a event, then have a directive called autofocus listen for that event and set focus on the element (last one wins)

[Will Kriski]

The autofocus attribute on input element worked for me at least, so thanks!

W

[j...@fotobabble.com]

Let's assume autofocus is not enough.  I basically want something similar to this functionality

http://jsfiddle.net/jtowell/FkPF5/  -- click between the 2 elements

http://jsfiddle.net/jtowell/8M9fK/1/ -- same thing with autofocus.  Only seems to work the first time?

"have ng-show fire a event, then have a directive called autofocus listen for that event and set focus on the element (last one wins)"

Yes.  How do I do this?  Note I will have a click to work with, so I can set something in my model that the directive could listen to (vs listening to the show).  So by last one wins you are saying this will only work if the show is activated before the focus?  Is there a way to extend from an existing angular directive and decorate it with some additional functionality?  So I could create a show-focus directive that extends the show functionality and adds a elem.focus() at the end?  That way I don't have to worry about the "last one wins" scenario correct?

Thanks,

-John

[j...@fotobabble.com]

Here is the angular version with autofocus.  So I want this version to work like FkPF5.

http://jsfiddle.net/jtowell/vHHLq/

Thanks,

-John

[j...@fotobabble.com]

Well I think I have a working version in my app, however I can't get it to work in jsfiddle!  Heh.

http://jsfiddle.net/jtowell/xK28W/

I am getting the following stack trace.  Any ideas?  Anyone?

Error: $digest already in progress at Error (unknown source) at beginPhase (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:8029:15) at Object.$get.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js:7849:11) at HTMLSelectElement.<anonymous> (https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js:273:11) at HTMLSelectElement.jQuery.event.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js:3332:9) at HTMLSelectElement.jQuery.event.add.elemData.handle.eventHandle (https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js:2941:28) at Object.jQuery.event.trigger (https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js:3241:18) at HTMLSelectElement.jQuery.fn.extend.trigger (https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js:3869:17) at Function.jQuery.extend.each (https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js:660:20) at jQuery.fn.jQuery.each (https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js:271:17)

[j...@fotobabble.com]

Eddie helped me by suggesting to use setTimeout.  Thanks Eddie!

Here is working version.

http://jsfiddle.net/jtowell/j8hnr/

[j...@fotobabble.com]

I logged the following issue with my earlier example.

https://github.com/angular/angular.js/issues/1250