使用 UI-Bootstrap / AngularJS 时，模态 Window 中的表单输入不响应点击

Question

我有一个难题，我想不出解决办法。我有一个使用 AngularJS 和 UI-Bootstrap (angular-ui-bootstrap) 的 Web 应用程序。在我的应用程序中，我编写了一项服务，该服务将在事件发生（例如单击事件）时打开具有特定视图的模态 window。现在在 window 中打开的视图中是表单，因此用户可以更新他们的个人详细信息等等......现在我注意到，当单击 HTML 中包含的视图中的表单输入时Modal Window（例如，Select，输入）界面没有响应。因此 select 选项未显示，或者要键入的键盘不可用。在 Android 上的 Chrome 中没有任何功能，就好像没有抵抗点击一样。在 Firefox 中，它非常慢，但会显示选项。在 iOS 中，性能缓慢且不可靠。当我在不属于模态视图的视图中创建输入的克隆时，没有问题。

这是我的模态服务的一部分，给你一个想法...我已经从 UI-Bootstrap

扩展了 $modal

angular.module('myapp')
    .factory('ModalService', ['$modal', function ($modal) {
        // I have only included one method but we have many...

      var modal = angular.copy($modal);
      modal.addProfileChildren = function (childData) {

            var options = {
                templateUrl: '/an/views/modals/modal-profile-add-children.html',
                controller: 'ProfileAddChildrenCtrl',
                windowClass: 'add-children-modal',
                resolve: {
                    modalData: function () {

                        return {
                            childData: childData
                        };
                    }
                }
            };

            return modal.open(options);
        };

        return modal;
    }]);

这里是templateUrl调用的视图（这是/an/views/modals/modal-profile-add-children.html）

    <form name="childrenForm" data-ng-submit="setChildren(children)" novalidate>

    <!-- List Existing Children Here -->
    <div class="container-fluid u-no-padding-hori">
        <div data-ng-repeat="existingKid in existingChildren" data-delete-child="{{existingKid.id}}" class="row question-wrapper u-no-margin-horiz">
            <div class="col-xs-2 affiliation-icon"><span class="icon-ic_kids"></span></div>
            <div class="col-xs-8">
                <div class="affiliation-main" data-ng-bind="existingKid.title"></div>
                <div class="affiliation-sub" data-ng-bind="existingKid.text"></div>
            </div>
            <div class="col-xs-2 text-right"><span class="u-icon-circle icon-ic_trash u-text-color-blue"></span></div>
        </div>
    </div>

    <!-- clicking on the select below should provide a dynamic form when I click in a mobile browser NOTHING happens -->

    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 u-padding-top-s question-footer">
                <select ng-model="children.number"
                        data-ng-options="kid.label for kid in childrenDefault track by kid.value">
                </select>
            </div>
        </div>
    </div>

    <div class="container-fluid" data-ng-repeat="child in getNumber(children.number.value) track by $index">
        <!-- loads of dynamic stuff here -->
    </div>

这真的很奇怪，因为在桌面浏览器中我没有问题，当我将类似的表单放在模态 windows 中未包含的视图中时，功能如我们预期的那样工作。有谁之前经历过这个吗？请注意，在我的索引 HTML 中，我确实有以下元标记，它被建议作为类似问题的解决方案

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />

请注意，在浏览器控制台中没有显示任何错误，我什至没有任何警告。

Answer 1

惊慌失措！我在阅读以下内容后找到了解决方案：https://github.com/angular-ui/bootstrap/issues/2280 - 似乎与 ngTouch 和模态服务与 UI-Bootstrap 存在冲突。已修复！

然后我简单地将 Bower 中的 Ui-Bootstrap 库从“angular-bootstrap": "~0.12.0" 更新为 "angular-bootstrap": "0.14.3"

我很高兴也很放心，我可以亲吻别人了！

使用 UI-Bootstrap / AngularJS 时，模态 Window 中的表单输入不响应点击

Form Inputs in Modal Window not responsive to click using UI-Bootstrap / AngularJS

javascript

android

angularjs

angular-ui-bootstrap