Почему фокус на текстовое поле не установлен внутри модал (всплывающее окно) Twitter-начальной загрузки AngularJS

Я пытался реализовать то, что предложено здесь и другое подобное решениеКак установить фокус на поле ввода?

PLUNKER мой код с нерабочим автофокусом.

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

  }
});  

Ни одно из решений не работает для меня. Я как-то фокусируюсь на текстовом поле всякий раз, когда открывается модальное окно, но потомбольше не надо получить значениеuserName1 черезng-model, После реализацииfocusMe директиваuserName1 всегда неопределен

редактировать

Собираюсь попробовать этоМогу ли я использовать ng-модель с изолированной областью?

Потому что кажетсяng-model не будет работать для вышеуказанного решения

Тем временем кто-нибудь приходит с ответом на мой вопрос«Как установить автофокус на текстовое поле внутри модератора twitter-bootstrap и получить значение, введенное в это текстовое поле через ng-модель» Поделись, пожалуйста.

Ответы на вопрос(4)

Ваш ответ на вопрос