文本输入框不接受来自Angular UI Bootstrap的模态输入
我有一个模式（编号1），我从另一个模式（编号2）打开。 模式nbr 1工作正常，并显示它应该的东西。 但我试图把输入过滤项目在模式，但输入不起作用。 我不能写任何东西，它只是不接受我的意见。
我认为这与事实有关，因为它是我的第二个模式，因为当我从“根”（不从另一个模式打开它）打开它时，文本输入正常工作。
这是我的html：
<div class="modal-header">
<h3 class="modal-title">Pick a student</h3>
<div class="modal-body">
<!-- I can't type in this text field, no matter where it's placed och if it has any attributes at all -->
<input type="text" class="form-control" id="searchUsers" placeholder="Search by name, personal ID number or group" ng-model="search.$" ng-click="console.log('omg')">
<table class="table table-hover table-striped equi-table">
<tbody>
<tr ng-repeat="user in state.users | filter:search:strict">
<td>{{ user.firstName }}</td>
<td>{{ user.lastName }}</td>
<td>{{ user.personalIDNumber }}</td>
</tr>
</tbody>
</table>
</div>
这里是JavaScript：
这部分从模态2打开模态：
$scope.addUserToCourse = function () {
utilities.pickAUserModal();
};
这里是实际的模态
angular.module('equiclass.services')
.factory('utilities', function ($modal) {
var pickAUserModal = function () {
var modalInstance = $modal.open({
templateUrl: '/views/modals/pick-a-user-modal.html',
controller: function ($scope, $modalInstance, stateService, userService) {
var log = loggingService.getLogger ('pickAUserModal');
$scope.state = userService.state;
userService.initializeUsers().then(function () {
$scope.hasInitialized = true;
});
$scope.ok = function () {
$modalInstance.close(true);
};
$scope.cancel = function () {
$modalInstance.close(false);
};
}
});
};
return {
pickAUserModal: pickAUserModal
};
});
为什么我无法在文本输入中输入任何内容？ 我试过编辑z索引，并在其中放入不同类型的输入（复选框工作，textareas不）。 正如我之前所说的，模态是从另一个模态打开的，但是第二个模态不是使用Angular UI Bootstrap创建的（我正慢慢地逐步转向角UI）
我有与角带模式相同的问题，我无法设法写入任何输入字段。 几个小时后，我发现了什么是错的，以及如何解决它。 问题出现在bootstrap-additions.min.css和class .modal.center .modal-dialog中，position属性是固定的。 我不知道为什么，但将所有输入字段分解为我的模式。 当你对该属性使用绝对位置时，模态块工作正常。
.modal.center .modal-dialog{
position:absolute !important;
top:40%;left:50%;
min-width:320px;
max-width:630px;
width:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%)
}
我希望能帮助你解决你的问题。
我也遇到同样的问题，下面的代码：
element.on('mousedown', function (event) {
// Prevent default dragging of selected content
event.preventDefault();
startX = event.screenX - x;
startY = event.screenY - y;
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
});
我通过删除event.preventDefault();修复它event.preventDefault(); ，将代码更改为：
element.on('mousedown', function (event) {
startX = event.screenX - x;
startY = event.screenY - y;
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
});
这可让点击次数到达这些字段。
我知道这很晚，但今天我遇到了同样的错误。 我为它修复的是删除角带提供的自定义引导CSS。 直到我添加日期选择器并且它的样式不正确时，我才使用它。
我只使用日期选择器CSS，并解决了问题。 我猜测它与自定义CSS中的模式风格有关。
希望这可以帮助某人。
链接地址: http://www.djcxy.com/p/22109.html上一篇: Text input box not accepting input in modal from Angular UI Bootstrap