AngularJS .focus() not working within link function

Question

Why is it that if I have the following directive it works:

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

But if I switch it to this, it says element.focus() is not a function. To get this code to work, I need to import jquery in my index.html.

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

Here is my HTML:

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="app">
  <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here" select-on-focus >
    <hr>
    <h1>Hello {{yourName}}!</h1>
  </div>
</body>

</html>

see this answer: stackoverflow.com/questions/14204446/…

mcranston18
– mcranston18

2015-07-28 01:56:43 +00:00
Commented Jul 28, 2015 at 1:56 — mcranston18
– mcranston18, Commented Jul 28, 2015 at 1:56

Paul · Accepted Answer · 2015-07-28 02:10:22Z

3

I think the question is, why does your code work with element[0].focus(), but not with element.focus(). The answer, as indicated by @mcranston18's comment, is element returns a jqLite object. Refer to the docs for directives here, and jqLite elements here for a deeper understand of what that means. Also, a simple console log of the element object, in the updated jsFiddle, http://jsfiddle.net/rmra3cso/1/, shows what's inside the jqLite object.

In short, when you include jQuery and call element.focus(), you are using the jQuery focus method. When you use element[0].focus(), you are accessing the DOM element itself and using pure JavaScript. I suggest not using jQuery with Angular, and getting used to using jqLite. You'll find you probably won't need jQuery with Angular.

Hope this helps.

answered Jul 28, 2015 at 2:10

Paul

1,05611 silver badges18 bronze badges

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

3 Comments

HelpMeStackOverflowMyOnlyHope Over a year ago

So to access the direct DOM element its always just element[0]? In what instance would there be more than one item in the element array?

Paul Over a year ago

According to the docs, "element is the jqLite-wrapped element that this directive matches." Therefore, in your case, you will always get one jqLite-wrapped element in the link function.

marianobianchi Over a year ago

I tried to use element[0].focus() but when running tests I got something like "focus is not a function". But it works like a charm if I use element[0].select(). Do you know why I get this error?

Ikrom · Accepted Answer · 2015-10-16 11:40:23Z

2

That's because focus() is not supported in jqLite and from the angular docs on element

If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite."

edited Oct 16, 2015 at 11:40

Ikrom

5,1395 gold badges55 silver badges79 bronze badges

answered Jul 28, 2015 at 2:04

logee

5,0321 gold badge29 silver badges36 bronze badges

Collectives™ on Stack Overflow

AngularJS .focus() not working within link function

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related