Angularjs 文本输入框不接受来自角度UI引导的模式输入

我从另一个模式（nbr 2）打开了一个模式（nbr 1）。modal 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>

这是实际的模态

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引导创建的（我正在慢慢过渡到Angular UI）

我在Angular strap模式上也有同样的问题，我无法写入任何输入字段。几个小时后，我发现了什么问题以及如何解决它。这个问题来自bootstrap-additions.min.css和class.modal.center.modal对话框，它的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%)
} 

---

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

我知道这已经很晚了，但我今天遇到了同样的错误。修正我的是删除angular strap提供的自定义引导CSS。我没有使用这个，直到我添加了日期选择器，它的样式不正确

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

---

希望这对某人有所帮助。

在执行其他人的ngDraggable指令后，我遇到了同样的问题。作为模态的一部分使用的东西可能也有类似的功能——它捕获click事件并在事件上调用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);
      });

---

我对以下代码也有同样的问题：

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

这允许单击到达字段
 您是否在开发人员工具中签入了输入被真正禁用的选项？或者它可能是来自第一个模态的onder叠加？我不认为它是叠加的，因为所有其他按钮等都可以工作。我已经阅读了文档，但在那里什么也找不到！你能在JSFIDLE或plnkr上做一个有效的例子吗？我会试试这个，看看它是否有用
element.on('mousedown', function (event) {
        startX = event.screenX - x;
        startY = event.screenY - y;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
      });