Why focus on textbox is not set inside a twitter-bootstrap modal (popup) by AngularJS

angularjs, javascript, twitter-bootstrap

Solution

I modified your plunker, http://plnkr.co/WKq83K, and created this working plunker: http://plnkr.co/edit/fsBjsW?p=preview

Changes are as follows:

Use `focus-me`, not `focusMe`:

<input class="pull-left" id="userIdTextBox" type="text" ng-model="userName1"
 ng-minlength="1" ng-trim="true" focus-me="focusInput">

Set `focusInput` to `true` when the dialog is opened:

<button class="btn" id="enterUsernameBtn" href="#userNameModal" role="button"
 class="btn" data-toggle="modal" title="Enter Username" 
 ng-click="focusInput=true">Enter Username</button>

Set it back to `false` when the dialog is submitted:

$scope.submitUserName= function() {    
   $scope.focusInput = false;
   ...

or cancelled:

<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
 ng-click="focusInput=false">x</button>

`$timeout` needs to wait a bit for the modal to render. Values less than 480 did not appear to work, so I used something larger, 700:

$timeout(function() {
   element.focus();
 }, 700);

Problem

I have been trying to implement what suggested here and other similar solution How to set focus on input field? PLUNKER my code with non-working autofocus. HTML ``` <body ng-controller='userNameController'> <button class="btn" id="enterUsernameBtn" href="#userNameModal" role="button" class="btn" data-toggle="modal" title="Enter Username" ng-click="focusInput=true">Enter Username</button> <!-- UserName Modal --> <div id="userNameModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userNameModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="userNameModalLabel">Enter your username</h3> </div> <div class="modal-body"> <div class="input-append"> <input class="pull-left" id="userIdTextBox" type="text" ng-model="userName1" ng-minlength="1" ng-trim="true" focus-me="focusInput"/> </div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="{{whatToDismiss}}" aria-hidden="true" ng-click="submitUserName()">Submit</button> </div> </div> </body> ``` JavaScript ``` var app = angular.module('abcApp',[]); app.directive('focusMe', function($timeout) { return { scope: { trigger: '@focusMe' }, link: function(scope, element) { scope.$watch('trigger', function(value) { if(value === "true") { $timeout(function() { element[0].focus(); }); } }); } }; }); app.controller('userNameController',function ($scope) { $scope.whatToDismiss=''; // workaround not to close the modal if it is an invalid input $scope.focusInput=false; $scope.submitUserName= function () { if($scope.userName1===undefined || $scope.userName1==="") { alert("Invalid Input"); return; } alert("username entered"+$scope.userName1); $scope.whatToDismiss='modal'; } }); ``` None of solution is working for me. I somehow get the focus to set on textbox whenever modal opens, but then I no more get value of `userName1` through `ng-model`. After implementing `focusMe` directive `userName1` is always undefined. Edit Going to try this Can I use ng-model with isolated scope? Because it seems `ng-model` won't work for above solution Meanwhile, anyone comes with answer to my question "How to set auto-focus to textbox inside twitter-bootstrap modal and able to get value entered in that textbox through ng-model" please share.

Original source

Related problems