文本输入框不接受来自 Angular UI Bootstrap 的模态输入答案

【问题标题】：Text input box not accepting input in modal from Angular UI Bootstrap文本输入框不接受来自 Angular UI Bootstrap 的模态输入
【发布时间】：2015-05-07 03:18:09
【问题描述】：

我有一个从另一个模式 (nbr 2) 打开的模式 (nbr 1)。模态 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：

这部分从模态 nbr 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-indexes，并在那里放置不同类型的输入（复选框有效，textareas 无效）。正如我之前所说，模态是从另一个模态打开的，但是第二个模态不是使用 Angular UI Bootstrap 创建的（我正在慢慢过渡到 Angular UI）

【问题讨论】：

您是否在开发者工具中检查了输入确实被禁用了？或者它可能是第一个模态的叠加层？
我认为它没有被覆盖，因为所有其他按钮等都可以工作。我已阅读文档，但找不到任何内容！
你能在 jsfiddle 或 plnkr 上做一个工作示例吗？

标签： angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

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

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

我希望这可以帮助你解决你的问题。

【讨论】：

我会试试看是否有帮助

【解决方案2】：

下面的代码我也遇到了同样的问题：

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();来修复它，将代码更改为：

element.on('mousedown', function (event) {
        startX = event.screenX - x;
        startY = event.screenY - y;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
      });

这允许点击到达字段。

【讨论】：

【解决方案3】：

我知道这已经晚了，但我今天遇到了同样的错误。为我解决的问题是删除了 angular strap 提供的自定义引导 CSS。在我添加日期选择器并且样式不正确之前，我没有使用它。

我刚刚使用了日期选择器 CSS 并解决了问题。我猜这与自定义 CSS 中的模态样式有关。

希望这对某人有所帮助。

【讨论】：

【解决方案4】：

在实施其他人的 ngDraggable 指令后，我遇到了同样的问题。您作为模式的一部分使用的内容可能会执行类似的操作 - 它捕获点击事件并在事件上调用 preventDefault() ，这意味着光标实际上永远不会到达输入。我在下面的内容允许模态框可拖动，但阻止点击到达表单字段。

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

【讨论】：