Я пытался реализовать то, что предлагалось здесь, и другое подобное решение Как установить фокус на поле ввода?
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
всегда undefined.
Изменить
Попытка Можно ли использовать ng-модель с изолированной областью?
Потому что кажется, что ng-model
не будет работать для вышеуказанного решения
Между тем, каждый приходит с ответом на мой вопрос "Как установить автофокус в текстовое поле внутри twitter-bootstrap modal и в состоянии получить значение, введенное в это текстовое поле через ng-model" , пожалуйста, поделитесь.