How to get jQuery to wait until after AngularJS has rendered an input element to set focus on it?

Question

I have an input element being created in an AngularJS directive:

<span ng-repeat="phrasePart in phraseParts">
    {{phrasePart}}<input ng-attr-id="{{ 'phrasePart-' + $index }}" ng-if="!$last"/>
</span>

and I want the first input element i.e. (<input id="phrasePart-0" /> to receive focus, so I do this with jQuery:

$(function () {
    $("#phrasePart-0").focus();
});

However, this code does set focus in an input element that is directly in the HTML and not rendered by AngularJS.

How can I get jQuery to wait until the input element "phrasePart-0" is created by AngularJS before setting focus?
Is there an "AngularJS way" to set focus that would be better?

Ash · Accepted Answer · 2015-01-13 11:23:20Z

2

The more 'Angular' way to do it would to use a directive.

~~then apply that directive to the first occurance as a class~~

Just checked this. This is not the case because ng-class does not recompile dom elements for angular directives.

Instead, this may be a more reliable solution: http://jsfiddle.net/HB7LU/9958/

.directive("focusme", function(){
  return {
      scope:{
          focusme:"="
      },
    link:function(scope, element, attrs, $timeout){
        if (scope.focusme){
            element[0].focus();
        }
    }
  }
})

and for the HTML

 <span ng-repeat="phrasePart in phraseParts">
        {{phrasePart}}<input ng-attr-id="{{ 'phrasePart-' + $index }}" ng-if="!$last" focusme="$first" />
    </span>

edited Jan 13, 2015 at 11:23

answered Jan 13, 2015 at 10:56

Ash

6204 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ash Over a year ago

Ammended. ng-class does not call $compile which means the 'directive' class won't do anything.

Polmonite Over a year ago

I also like this approach more than using $timeout. It also seems to work using HTML5 autofocus attribute, changing 'element[0].focus();' to 'element[0].autofocus = true;', which is cool. Still, the fiddle doesn't work under Firefox for me :/

Madhur Ahuja · Accepted Answer · 2015-01-13 11:03:21Z

2

Use, $timeout

Check out this fiddle

http://jsfiddle.net/cndhpqrz/

var myApp = angular.module('myApp',[]);

function myfunc($scope, $timeout)
{

$scope.phraseParts=[1,2,3,4,5,6];

$timeout(function()
         {
    $("#phrasePart-2").focus();
});
}

answered Jan 13, 2015 at 11:03

Madhur Ahuja

22.8k15 gold badges77 silver badges128 bronze badges

2 Comments

Edward Tanguay Over a year ago

Interesting, both your fiddle and my code don't work in Firefox, but work in Chrome.

Edward Tanguay Over a year ago

They both work in IE11 as well. Do they work in your Firefox?

dhavalcengg · Accepted Answer · 2015-01-13 10:52:42Z

0

use $timeout service of angularjs.

$timeout handler will be called after the digest cycle completes. So at that time you will have your input rendered.

$timeout(function () {
    $("#phrasePart-0").focus();
});

answered Jan 13, 2015 at 10:52

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to get jQuery to wait until after AngularJS has rendered an input element to set focus on it?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related