Warum wird der Fokus auf Textbox nicht in einem Twitter-Bootstrap-Modal (Popup) von AngularJS festgelegt?
Ich habe versucht, umzusetzen, was hier und andere ähnliche Lösung vorschlugWie setze ich den Fokus auf das Eingabefeld?
PLUNKER Mein Code mit nicht funktionierendem Autofokus.
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';
}
});
Keine der Lösungen funktioniert bei mir. Ich bekomme irgendwie den Fokus auf Textbox gesetzt, wann immer sich modal öffnet, aber dann habe ichnicht mehr erhalten Wert vonuserName1 durchng-model. Nach der ImplementierungfocusMe RichtlinieuserName1 ist immer undefiniert.
Bearbeiten
Ich werde es versuchenKann ich ein ng-Modell mit einem isolierten Bereich verwenden?
Weil es scheintng-model funktioniert nicht für obige Lösung
In der Zwischenzeit kommt jemand mit einer Antwort auf meine Frage"So stellen Sie den Autofokus auf das Textfeld im Twitter-Bootstrap-Modus ein und können den Wert über ng-model in dieses Textfeld eingeben" bitte teilen.