Por que o foco na caixa de texto não é definido dentro de um modal do twitter-bootstrap (pop-up) por AngularJS

Question

Jul 11, 2013, 07:13 PM

Por que o foco na caixa de texto não é definido dentro de um modal do twitter-bootstrap (pop-up) por AngularJS

Eu tenho tentado implementar o que sugeri aqui e outra solução semelhanteComo definir o foco no campo de entrada?

PLUNKER meu código com autofoco não funcional.

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';

  }
});

Nenhuma solução está funcionando para mim. De alguma forma eu tenho o foco para definir na caixa de texto sempre que modal abre, mas então eunão mais obter valor deuserName1 atravésng-model. Depois de implementarfocusMe diretivauserName1 está sempre indefinido.

Editar

Indo tentar issoPosso usar o modelo ng com escopo isolado?

Porque pareceng-model não vai funcionar para a solução acima

Enquanto isso, alguém vem com resposta para minha pergunta"Como definir o foco automático para a caixa de texto dentro do modal do twitter-bootstrap e conseguir obter o valor inserido nessa caixa de texto por meio do ng-model" por favor compartilhe.