Set an input focus active after toggle ng-show

Question

I don't get how I can focus the input after it appears with ng-show / ng-hide. I'm using a button with ng-click="showme=!showme" to show and hide my input. Any tips?

HTML:

<div ng-app="">  
  <button ng-click="showme=!showme">SHOW/HIDE</button> 
  <div class="wrapper">
    <p ng-hide="showme">It will appear here!</p>
    <input ng-show="showme" type="text" name="s" placeholder="Search..." />
  </div> 
</div>

JFiddle

I tryed using what is suggested here, but it doesn't work.

JFiddle

I also tryed the autofocus directive, but it still doesn't work.

this looks like it's working just fine; what's your question, exactly? — Claies, Mar 13 '17 at 19:59
Possible duplicate of [How to set focus on input field?](http://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field) — Claies, Mar 13 '17 at 20:06
No, I already tryed that but it doesn't work on my toggle function — LucaP, Mar 13 '17 at 20:10
you didn't say that, or show it here. If you tried something that didn't work, you should describe how you tried to use it here, and possibly also update your fiddle example. — Claies, Mar 13 '17 at 20:11
I updated the JFiddle, maybe I did something wrong, I'm new to angular — LucaP, Mar 13 '17 at 20:53

score 1 · Accepted Answer · answered Apr 18 '17 at 15:57

I've fixed this adding a controller in which I declare a new scope and an a toggling on the attribute that declares the focus. Here is the code:

HTML:

<div ng-app="pippo" ng-controller="pippoctrl">  
  <button ng-click="showme=!showme;shouldBeOpen=!shouldBeOpen">SHOW/HIDE</button> 
  <div class="wrapper">
    <p ng-hide="showme">It will appear here!</p>
    <input focus-me="shouldBeOpen" ng-show="showme" type="text" name="s" placeholder="Search..." />
  </div> 
</div>

JS:

var app=angular.module("pippo",[]);
app.controller('pippoctrl', ['$scope',function ($scope){ 
        $scope.shouldBeOpen=false;
}]);
app.directive('focusMe', ['$timeout' , function ($timeout) {
    return {
    //scope: true,   // optionally create a child scope
        link: function (scope, element, attrs) {
        console.log('focus-me=', attrs.focusMe);
            scope.$watch(attrs.focusMe,function(value){
                console.log('value=', value);
                if (value === true) {
                    $timeout(function () {
                        element[0].focus();
                    });

                }
            });

        }
    };
}]);

Here is the full code: JSFiddle

Set an input focus active after toggle ng-show

1 Answers1