admin管理员组文章数量:1341450
I have been trying to implement what suggested here and other similar solution How to set focus on input field?
PLUNKER my code with non-working autofocus.
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';
}
});
None of solution is working for me. I somehow get the focus to set on textbox whenever modal opens, but then I no more get value of userName1 through ng-model. After implementing focusMe directive userName1 is always undefined.
Edit
Going to try this Can I use ng-model with isolated scope?
Because it seems ng-model won't work for above solution
Meanwhile, anyone es with answer to my question "How to set auto-focus to textbox inside twitter-bootstrap modal and able to get value entered in that textbox through ng-model" please share.
I have been trying to implement what suggested here and other similar solution How to set focus on input field?
PLUNKER my code with non-working autofocus.
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';
}
});
None of solution is working for me. I somehow get the focus to set on textbox whenever modal opens, but then I no more get value of userName1 through ng-model. After implementing focusMe directive userName1 is always undefined.
Edit
Going to try this Can I use ng-model with isolated scope?
Because it seems ng-model won't work for above solution
Meanwhile, anyone es with answer to my question "How to set auto-focus to textbox inside twitter-bootstrap modal and able to get value entered in that textbox through ng-model" please share.
Share Improve this question edited May 23, 2017 at 11:56 CommunityBot 11 silver badge asked Jul 11, 2013 at 17:13 WattWatt 3,16414 gold badges57 silver badges88 bronze badges 2- Your plunkr can't load example.js check the console F12 – shaunhusain Commented Jul 11, 2013 at 17:52
- @shaunhusain, you can ignore that error. There is no example.js. I am new to plunkr, going to try to delete that line from html. – Watt Commented Jul 11, 2013 at 17:55
4 Answers
Reset to default 9 +50I modified your plunker, http://plnkr.co/WKq83K, and created this working plunker: http://plnkr.co/edit/fsBjsW?p=preview
Changes are as follows:
Use focus-me, not focusMe:
<input class="pull-left" id="userIdTextBox" type="text" ng-model="userName1"
ng-minlength="1" ng-trim="true" focus-me="focusInput">
Set focusInput to true when the dialog is opened:
<button class="btn" id="enterUsernameBtn" href="#userNameModal" role="button"
class="btn" data-toggle="modal" title="Enter Username"
ng-click="focusInput=true">Enter Username</button>
Set it back to false when the dialog is submitted:
$scope.submitUserName= function() {
$scope.focusInput = false;
...
or cancelled:
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
ng-click="focusInput=false">x</button>
$timeout needs to wait a bit for the modal to render. Values less than 480 did not appear to work, so I used something larger, 700:
$timeout(function() {
element.focus();
}, 700);
focusMe directive that you've found in that post is not meant to be used with ng-model without some changes. That directive defines isolated scope so ngModel is not propagated upwards to the parent controller scope.
To remedy this the easiest solution is simply redefine your directive not to use separate scope, and to fetch the focusMe attribute value through linking function's attrs object:
app.directive('_focusMe', function($timeout) {
return function(scope, element, attrs) {
scope.$watch(attrs.focusMe, function(value) {
if(value) {
$timeout(function() {
element.focus();
}, 20);
}
});
};
});
PLUNKER
I have used the following url Building dialog service using bootstrap modal for customizing my alert and confirm boxes. Here I have a situation to autofocus the ok button by default. So I have used the following simple directive, and it works for me without any hassle, hope it helps to anyone.
myApp.directive('focusMe', function($timeout, $pile) {
return {
link: function (scope, element, attrs) {
scope.$watch(attrs.focusMe, function(val) {
// element.html(anyHtmlHere);
// $pile(element.contents())(scope);
$timeout(function() {
element[0].focus();
}, 20);
});
}
};
});
Here you can customize the inner html of the element by using $pile option in the mented section
I wanted to make it as easy as possible to define which input field would get focus on modal opened, so I created an extension to the $modal provider named modal and put it in a separate module. Now whenever I want to focus something in a newly opened dialog, I simply write:
function MyController(modal) {
var modalInstance = modal.openExtended( {
focus: "#categoryName",
// ... more options
} );
}
Now the only thing I have to do different is to use modal.openExtended instead of $modal.open and provide a focus parameter to the options.
The extension is as shown below:
angular.module('ponents', ['ui.bootstrap'])
.service('modal', function($modal, $timeout) {
var extended = angular.extend( $modal );
$modal.openExtended = function( modalOptions ) {
var modalInstance = $modal.open( modalOptions );
if ( typeof( modalOptions.focus ) != "undefined" ) {
modalInstance.opened.then( function() {
$timeout( function() {
$( modalOptions.focus ).focus();
// The interval of 100 millis below is somewhat arbitrary.
// Use something higher if the focus doesn't always work
}, 100 );
});
}
return modalInstance;
};
return extended;
});
Note that you will need to include the ponents module into your app, as such:
var app = angular.module('app', ['ponents', 'ui.bootstrap']);
本文标签：
版权声明：本文标题：javascript - Why focus on textbox is not set inside a twitter-bootstrap modal (popup) by AngularJS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743676255a2520363.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论