How to set autofocus in partial views using angularjs?

Question

In my project am using partial pages more. i couldn't set auto focus on text box control whereas it is working in normal pages.

This is my partial page view :

<body ng-app="app" ng-controller="myCtrl">

        <section>
             <input type="text" focus-me/>
             <input type="text" />
                 <a ng-click="show()">click</a>
            <section>
        <section ng-show="show">
            <input type="text" focus-me/>
            </section>
    </body>

This is my js :

var app = angular.module("app", []);
app.controller('myCtrl', function($scope) {
}); 
 $scope.show = false;

$scope.show = function() {
    $scope.show = true;
};
angular.module('ng').directive('focusMe', function($timeout) {
    return {
        link: function ( scope, element, attrs ) {
                    $timeout( function () { element[0].focus(); } );
                }


    };
});

1)The focus-me works in first section of html but not in second section because its being shown through ng-show as a partial view. 2)And the focus goes to the last item while i use ng-repeat but it needs to set in first item.

can anyone please help me with these two questions?

partial which i meant that a page comes as a pop up in the same page itself.but i didn't use any dialogues.i simply have both the page's content in single page and i show one through ng-show as a popup — Ninja, Sep 12 '14 at 11:35
auto focus works only in complete pages but not in a partial ones — Ninja, Sep 12 '14 at 11:36
Possible duplicate of [How to set focus on input field?](https://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field) — Dinei, Jun 05 '17 at 17:51

JoseM · Accepted Answer · 2014-09-12T14:32:04.077

Your first issue is because although ng-show is controlling whether you can see the dom element in the view, it is actually in the dom, so your directive will run when it is placed into the dom. If instead you use ng-if then it will work as you expect.

The second issue is actually working as designed. Your directive invokes an immediate timeout to focus on the element and they are all working in the ng-repeat. The reason why it focuses on the last one is because that is the last one to emit the timeout focus event.

If you want only the first one in the list to be focused then can use the $first variable to have directive only work on the first element in the list.

Here is a working sample: http://plnkr.co/edit/1GbvaB?p=preview

fabulous explanation and answer jose..thank you so much..i really stucked with this for the long time..you gave such a beautiful explanation and answer :) — Ninja, Sep 15 '14 at 05:36

How to set autofocus in partial views using angularjs?

1 Answers1