angularjs - 文本输入框不接受来自 Angular UI Bootstrap 的模式输入

Question

我有一个模态框 (nbr 1)，是从另一个模态框 (nbr 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:

这部分从模态 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 索引，并在那里放置不同类型的输入(复选框有效，文本区域无效)。正如我之前所说，该模式是从另一个模式打开的，但第二个模式不是使用 Angular UI Bootstrap 创建的(我正在慢慢转向 Angular UI)

Answer 1

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

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

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