AngularJS - Bind Input to focus

Question

In my master ng-controller, I want to bind ALL inputs to a focus event and trigger a function. What I have tried (and failed) so far were:

// This makes sense since it is not a bind
$('input').focus(function(){});

// This should work, but doesn't!
$('input').bind('focus', function() {});

What are my options? How can I bind all input to a focus?

Read How do I “think in AngularJS” if I have a jQuery background? it will help you in longer run — Satpal
– Satpal, Commented Jul 23, 2014 at 8:41
@Kousha Create a directive. The directive will be the one that handles this kind of thing. Also, see ngFocus — Fad
– Fad, Commented Jul 23, 2014 at 8:42
@KemalFadillah, do you mean create a directive for input that is restricted to an element? — Kousha
– Kousha, Commented Jul 23, 2014 at 8:43
@Kousha I'd have a look at MajoB's answer, another question here on SO (stackoverflow.com/questions/22352564/…), has a good couple of options for you on how to do this globally and/or for a more narrow scope in your application. — user1364910
– user1364910, Commented Jul 23, 2014 at 8:48

Community · Accepted Answer · 2017-05-23 12:08:32Z

3

You can add ngFocus directive to all input fields: https://docs.angularjs.org/api/ng/directive/ngFocus

<input type="text" ng-focus="controllerFunction()"></input>

Or read this answer how to do this globally for all inputs: AngularJS: extend input directive

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jul 23, 2014 at 8:44

Marian Ban

8,1881 gold badge35 silver badges45 bronze badges

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

2 Comments

Kousha Over a year ago

No, this is too much to add an ng-focus to every input, specially that I would want to use that (maybe) for other functionalists. Worst comes worst, I'll just have a directive for input

Marian Ban Over a year ago

@Kousha Then I think this is the proper way how to do it: stackoverflow.com/a/24905165/1385075

Kousha · Accepted Answer · 2014-07-23 08:49:44Z

2

Okay, I ended up using a directive for this purpose:

app.directive('input', function()
{
    return {
        restrict: 'E',
        link: function(scope, element, attrs)
        {
            element.bind('focus', function(){});
        }
    }
});

answered Jul 23, 2014 at 8:49

Kousha

36.7k60 gold badges191 silver badges318 bronze badges

Collectives™ on Stack Overflow

AngularJS - Bind Input to focus

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related