Question

我有一个模态（nbr 1），我从另一个模态打开（nbr 2）。模态nbr 1工作正常，并显示它应该的东西。但我试图在模态中输入过滤项目，但输入不起作用。我无法在其中写任何内容，它只是不接受我的意见。

我认为这与我的第二个模式有关，因为当我从＆＃34; root＆＃34; （不是从另一个模态打开它），文本输入工作正常。

这是我的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索引，并在那里放置不同类型的输入（复选框工作，textareas没有）。正如我之前所说的，模态是从另一个模态打开的，但模态数字2不是使用Angular UI Bootstrap创建的（我慢慢地逐步调整到角度UI）

Answer 1

我在角度模式模式中遇到了同样的问题，我无法写入任何输入字段。几个小时后，我发现了什么是错的以及如何解决它。问题来自bootstrap-additions.min.css和类.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%)
}

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

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

这允许点击到达字段。

Answer 3

我知道这已经很晚了，但今天我遇到了同样的错误。修复它对我来说是删除角带提供的自定义引导程序CSS。我没有使用它，直到我添加日期选择器并且它没有正确的样式。

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

希望这有助于某人。

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

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

4 个答案: