AngularJS/UI - Focus input in dialogs

Question

Is there any way to set focus in input controls using AngularJS/Angular-UI ?

I saw that Angular-UI has some Jq-UI=focus directive but I'm unable to get it to work.

I have a few dialogs that I display using Angular-UI $dialog service and would really like the first input on each dialog to get focus once it's shown

score 19 · Answer 1 · answered Mar 17 '14 at 17:39

19

I used the standard autofocus attribute in my template, and declared a simple directive to make it work for elements that are created after page load (like dialogs in your case).

app.directive('autofocus', function () {
  return {
    restrict: 'A',
    link: function (scope, element) {
      element[0].focus();
    }
  };
});

answered Mar 17 '14 at 17:39

Yann Dìnendal

1,422
2
17
27

1

Agreed. Nice simple solution that works well. I just added it to an ngDialog popup and it worked perfectly. Thanks! – user2233949 Nov 02 '15 at 13:23
1

Noob here, apologies: What does `restrict: 'A'` do? – Travis Heeter Nov 04 '16 at 19:03
1

@travis-heeter: it means the directive will be used as an attribute, not an element. See https://docs.angularjs.org/guide/directive#directive-types – Yann Dìnendal Nov 06 '16 at 20:34

Roger Johansson · Answer 2 · 2013-07-09T15:19:56.740

10

Turns out that all you need is this if you use it together with the Angular-ui $dialog service:

app.directive('focusMe', function ($timeout) {    
    return {    
        link: function (scope, element, attrs, model) {                
            $timeout(function () {
                element[0].focus();
            });
        }
    };
});

html:

  <input type="text" focus-me >

as stated, this is for Angular-UI $dialog service only.

See it live here: http://strengthtracker.apphb.com (click login or register to bring up the dialogs)

edited Jul 09 '13 at 15:19

answered Jul 09 '13 at 14:33

Roger Johansson

22,764
18
97
193

How to set focus on the footer buttons .. i am really not able to do so .. i need to close $dialog.messageBox if enter key is pressed – TalentTuner Jul 10 '13 at 05:03
add a
tag around the controls + button in your dialog
– Roger Johansson Jul 10 '13 at 05:08
This link appears to be dead. – Katerberg Apr 29 '14 at 20:47
please Continue this link, even i want to know how to add focus to footer button. Same issue as what Saurabh asked above – arun_kk Jun 27 '14 at 09:28
fyi also works with `$modal` service in Angular which is what `$dialog` was refactored into in later versions of Angular UI – Fred Jul 21 '15 at 01:03
Why the need for $timeout? – Dieterg Dec 23 '15 at 06:39

score 0 · Answer 3 · answered Jul 08 '13 at 10:05

You are right, I've shown demos on how you can call jQuery's native jQuery.fn.focus() method on a DOM element, as that's all ui-jq really does. The trick is getting it to fire multiple times, and at the right time.

ui-jq already executes the method for you inside a $timeout, however by default it only fires once, when the DOM element is created. In order to make ui-jq fire multiple times, simply add ui-refresh="someExpression" and use an expression that you know will change every single time the modal opens. It's alright if it refires when the modal is closed too, .focus() will do nothing if the DOM element is not visible.

So, for the ui-bootstrap modal, simply put the same expression you're using inside the modal="someExpression" and you should be set.

EpokK · Answer 4 · 2014-03-17T14:55:06.407

-5

The last version of AngularJS offers ng-focus : http://docs.angularjs.org/api/ng/directive/ngFocus

edited Mar 17 '14 at 14:55

answered Jul 08 '13 at 09:38

EpokK

38,062
9
61
69

doesnt work for me, the value passed into the directive watch function is just a string, e.g. 'focusInput' not the evaluated value of focusInput.. something must be wrong? – Roger Johansson Jul 09 '13 at 14:19
Doesn't work for me either. No errors thrown, simply nothing happens. – Ade Feb 27 '14 at 11:06
4

That's a callback for when a field is focused on. – jurchiks May 31 '14 at 13:02

AngularJS/UI - Focus input in dialogs

4 Answers4