文本输入框不接受从角UI引导模态输入 [英] Text input box not accepting input in modal from Angular UI Bootstrap

问题描述

我有一个模式（NBR 1），我从另一个模式（NBR 2）打开。模态NBR 1工作正常，并呈现出东西它应该。但我试图把输入来过滤模态的项目，但输入不工作。我不能写任何东西，它只是不接受我的意见。

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.

下面是我的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的：

And here's the JavaScript:

这部分打开从模态NBR 2：

This part opens the modal from modal 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-指标，并把各种不同的输入有（复选框工作，文本域没有）。正如我之前所说的，模态，从另一个模式打开，但是采用了棱角分明的用户界面引导（我慢慢地逐步转移到角UI）

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)

推荐答案

我有角带模态同样的问题，我无法管理写入到任何输入栏。几个小时后，我发现了什么问题以及如何解决它。这个问题带有引导-additions.min.css和阶级.modal.center哪个位置属性是固定.modal-对话框。我不知道为什么，但打破所有输入字段到我的情态。当您使用绝对现在的位置该属性的模式块的工作仅仅指刚精细。

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.

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