Question

我有一个问题，我无法想到解决方案。我有一个使用AngularJS和UI-Bootstrap（angular-ui-bootstrap）的Web应用程序。在我的应用程序中，我编写了一个服务，它将在事件发生时打开具有特定视图的模态窗口，例如单击事件。现在在窗口中打开的视图是表单，以便用户可以更新他们的个人详细信息等等...现在我注意到在模态窗口中包含的视图中单击HTML表单输入时（例如，选择，输入）界面没有响应。因此，未显示选择选项或键入的键盘不可用。在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>

这很奇怪，因为在桌面浏览器中我没有任何问题，当我在模式窗口中未包含的视图中放置类似的表单时，功能正如我们所期望的那样工作。有谁之前经历过这个吗？请注意，在我的索引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响应单击

1 个答案: