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


i have been trying implement suggested here , other similar solution how set focus on input field?

plunker code 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 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 close modal if 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 working me. somehow focus set on textbox whenever modal opens, no more value of username1 through ng-model. after implementing focusme directive username1 undefined.

edit

going try can use ng-model isolated scope?

because seems ng-model won't work above solution

meanwhile, comes answer question "how set auto-focus textbox inside twitter-bootstrap modal , able value entered in textbox through ng-model" please share.

i modified plunker, http://plnkr.co/wkq83k, , created working plunker: http://plnkr.co/edit/fsbjsw?p=preview

changes 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 true when dialog 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 false when dialog 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 wait bit modal render. values less 480 did not appear work, used larger, 700:

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

Comments

Post a Comment