文本输入框不接受来自 Angular UI Bootstrap 的模态输入 [英] Text input box not accepting input in modal from Angular UI Bootstrap

问题描述

我有一个模态 (nbr 1)，我是从另一个模态 (nbr 2) 打开的.模态 nbr 1 工作正常，并显示它应该的东西.但是我尝试在模态中放置一个输入来过滤项目，但是输入不起作用.我不能在里面写任何东西，它只是不接受我的输入.

我认为这与它是我的第二个模态这一事实有关，因为当我从根"(而不是从另一个模态打开它)打开它时，文本输入工作正常.

这是我的 html:

<h3 class="modal-title">选择一个学生</h3><div class="modal-body"><!-- 我无法输入此文本字段，无论它放在哪里，如果它有任何属性--><input type="text" class="form-control" id="searchUsers" placeholder="按姓名、个人ID号或组搜索" ng-model="search.$" ng-click="console.log('omg')"><table class="table table-hover table-striped equi-table"><tr ng-repeat="user in state.users | filter:search:strict"><td>{{ user.firstName }}</td><td>{{ user.lastName }}</td><td>{{ user.personalIDNumber }}</td></tr></tbody>

这是 JavaScript:

这部分从modal nbr 2打开modal:

$scope.addUserToCourse = function () {实用程序.pickAUserModal();};

这是实际的模态

angular.module('equiclass.services').factory('utilities', function ($modal) {var pickAUserModal = 函数 () {var modalInstance = $modal.open({templateUrl: '/views/modals/pick-a-user-modal.html',控制器:函数($scope，$modalInstance，stateService，userService){var log = loggingService.getLogger('pickAUserModal');$scope.state = userService.state;userService.initializeUsers().then(function () {$scope.hasInitialized = true;});$scope.ok = 函数 () {$modalInstance.close(true);};$scope.cancel = 函数 () {$modalInstance.close(false);};}});};返回 {pickAUserModal: pickAUserModal};});

为什么我无法在文本输入中输入任何内容?我试过编辑 z-indexes，并在那里放置不同类型的输入(复选框有效，textareas 无效).正如我之前所说，模态是从另一个模态打开的，但第二个模态不是使用 Angular UI Bootstrap 创建的(我正在慢慢过渡到 Angular UI)

解决方案

我在使用 angular-strap modal 时遇到了同样的问题，我无法写入任何输入字段.几个小时后，我发现了问题所在以及如何修复它.问题来自 bootstrap-additions.min.css 和 class .modal.center .modal-dialog 其中位置属性是固定的.我不知道为什么，但这会将所有输入字段分解为我的模态.当您对该属性使用绝对位置时，模态块可以正常工作.

.modal.center .modal-dialog{位置:绝对！重要；顶部:40%；左侧:50%；最小宽度:320px；最大宽度:630px；宽度:50%；-webkit-transform:translateX(-50%) translateY(-50%);变换:translateX(-50%) translateY(-50%)}

希望可以帮助您解决问题.

I have a modal (nbr 1) that I open from another modal (nbr 2). The modal nbr 1 works fine and is showing the things it should. But I tried to put an input to filter items in the modal, but the input is not working. I can't write anything in it, it's just not accepting my input.

I think this has something to do with the fact that it's is my second modal, since when I'm opening it from the "root" (not opening it from another modal), the text inputs works fine.

Here's my 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>

And here's the JavaScript:

This part opens the modal from modal nbr 2:

$scope.addUserToCourse = function () {
  utilities.pickAUserModal();
};

And here's the actual modal

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
  };
});

Why can't I type anything in my text input? I've tried editing z-indexes, and putting different kinds of inputs there (checkboxes work, textareas doesn't). And as I said before, the modal is opened from another modal, but modal number two is not created using Angular UI Bootstrap (I'm slowly phasing over to angular UI)

解决方案

I had the same problem with angular-strap modal and I could not manage to write into any input field. After few hours I have found what's wrong and how to fix it. The problem comes with bootstrap-additions.min.css and class .modal.center .modal-dialog which position property is fixed. I do not know why but that breaks all input fields into my modal. When you use absolute positon for that property the modal block works jsut fine.

.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%)
} 

I hope that can help you to with your problem.

这篇关于文本输入框不接受来自 Angular UI Bootstrap 的模态输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！