Dlaczego skupienie się na polu tekstowym nie jest ustawione w modalnym programie twitter-bootstrap (popup) AngularJS

Question

Jul 11, 2013, 07:13 PM

Dlaczego skupienie się na polu tekstowym nie jest ustawione w modalnym programie twitter-bootstrap (popup) AngularJS

Próbowałem wdrożyć to, co zasugerowałem tutaj i inne podobne rozwiązanieJak ustawić ostrość na polu wprowadzania?

PLUNKER mój kod z niedziałającym autofokusem.

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

  }
});

Żadne rozwiązanie nie działa dla mnie. W jakiś sposób skupiam się na ustawianiu pola tekstowego za każdym razem, gdy otwiera się modal, ale potem jajuż nie uzyskać wartośćuserName1 przezng-model. Po wdrożeniufocusMe dyrektywauserName1 jest zawsze niezdefiniowany.

Edytować

Spróbuję tegoCzy mogę używać modelu ng z izolowanym zakresem?

Ponieważ wydaje sięng-model nie zadziała dla powyższego rozwiązania

Tymczasem każdy przychodzi z odpowiedzią na moje pytanie„Jak ustawić auto-focus na pole tekstowe wewnątrz modalnego programu twitter-bootstrap i móc uzyskać wartość wprowadzoną w tym polu tekstowym przez model ng” proszę Podziel się.