How to handle conditional focus and selection on a text input in AngularJS?

Question

How to handle conditional focus and selection on a text input in AngularJS?

In this sample code http://plnkr.co/l6kv7x I want to move the focus into text input and select the content when the user clicks the edit button but I didn't figure it out how to do it in AngularJS.

javascript
angularjs

Answer 1

The question is very similar to AngularJS - Focusing a input element when a checkbox is clicked, so here is a very similar solution: a focus directive, that takes editing as an attribute:

app.directive('focus', function() {
    return function(scope, element, attrs) {
        scope.$watch(attrs.focus, function(newValue) {
            newValue && element[0].focus()
        })
    }
});

As @Josh already pointed out, we can use the native DOM focus() method, by accessing the raw DOM element using element[0] -- element itself is a wrapped jqLite (or jQuery if loaded) element.

The HTML:

<input ng-show="editing" type="text" ng-model="text" value="{{text}}"
  focus="editing">

Fiddle.

Answer 2

There is no direct way of doing it using AngularJS. You have to use JavaScript or JavaScript library such as jQuery for DOM manipulation, however it is not recommended to perform any DOM manipulation inside controller. What you want to do is use directive.