1

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.

devmao
  • 670
  • 8
  • 18
  • Selecting the content is rather a javascript question rather than angular specific. http://stackoverflow.com/questions/3150275/jquery-input-select-all-on-focus – venkat Jan 06 '13 at 17:09
  • 1
    Btw, for your edit in place, instead of using ng-show and ng-hide. Use the directive like in the following jsfiddle. http://jsfiddle.net/joshdmiller/NDFHg/ – venkat Jan 06 '13 at 17:10
  • @venkat Glad to see my code's getting some use! :-) – Josh David Miller Jan 06 '13 at 18:58
  • @devmao But don't use a jQuery focus method. As in my code example, there is a native DOM focus method: https://developer.mozilla.org/en-US/docs/DOM/element.focus. An Angular best practice is to avoid external libraries (like jQuery) whenever you can. – Josh David Miller Jan 06 '13 at 19:03
  • @JoshDavidMiller Ofcourse, it was a good implementation :-) – venkat Jan 08 '13 at 05:49

2 Answers2

3

The question is very similar to AngularJS - Focusing an 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.

Community
  • 1
  • 1
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
1

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.

Jigar Patel
  • 4,585
  • 1
  • 17
  • 20
  • 1
    You should *not* use jQuery for DOM manipulation in Angular if it can be avoided. There is a native DOM method for setting focus (element.focus) that I linked to in my comment to @devmao's post. – Josh David Miller Jan 07 '13 at 05:06
  • I understand that one doesn't have to use jQuery for focus. Essentially jQuery only encapsulates series of JavaScripts to perform the same task. I just assumed in most cases you will be ended up using jQuery one way or another. – Jigar Patel Jan 10 '13 at 03:55
  • Actually, if at all possible, you shouldn't use jQuery *at all* when using Angular. It creates a lot of issues, whereas most problems that can be solved with jQuery can be solved more simply with Angular. – Josh David Miller Jan 10 '13 at 04:05
  • I agree with you on the point where Angular does better job. However, in many instances you ended up requiring jQuery (i.e bootstrap css template with javascript or other commercial template). I was just indicating JQuery is one of the way to perform the similar operation. – Jigar Patel Jan 10 '13 at 04:21
  • Cool. In many cases you're right and I have no issue with your revised answer. +1 – Josh David Miller Jan 10 '13 at 05:07