Question

我选择日期后，为什么我的日期选择器没有在IE9中关闭？关闭按钮不工作...

Plunkr上提供的代码。

<div ng-app="arApp">

    <div ng-controller="AnnouncementRequestCtrl as vm">
        <legend>Your announcement request</legend>
        <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)"
            data-ng-animate="">{{alert.msg}}</alert>
        <div ng-show="showForm">
            <ng-form id="arform" name="arform" novalidate>

                <div class="form-group" >
                    <label class="control-label">
                        start date<div class="help-block error" ng-show="arform.sdate.$error.required">*</div></label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="sdate" id="sdate" datepicker-popup="{{format}}" ng-model="sdate"
                                is-open="opened1" min-date="minDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
                                ng-required="true" close-text="Close" required ng-focus="vm.open($event,'opened1')" />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="vm.open($event,'opened1')">
                                    <i class="glyphicon glyphicon-calendar"></i>
                                </button>
                            </span>
                        </div>

                </div>
                <div class="form-group" >
                    <label class="control-label">
                        end date<div class="help-block error" ng-show="arform.edate.$error.required">*</div></label>
                    <p class="input-group">
                        <input type="text" class="form-control" name="edate" id="edate" datepicker-popup="{{format}}" ng-model="edate"
                            is-open="opened2" min-date="sdate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 
                            ng-required="true" close-text="Close" required ng-focus="vm.open($event,'opened2')" />


                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="vm.open($event,'opened2')">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                        </span>
                    </p>

                </div>
        </ng-form>
        </div>
    </div>
</div>

Answer 1

问题确实是由ng-focus引起的。当您选择一个日期时，它会重新回到该字段并重新打开该对话框（看起来该对话框未关闭）

解决方案是使用ng-click代替 - 最好有两个原因。首先，因为它实际上有效，选择后对话框关闭。其次，它的可用性更好，因为如果用户已经专注于输入字段并单击该字段，则会重新打开日期选择器。在这种情况下，ng-focus不显示日期选择器。

一些代码： is-open="startDateOpen" ng-click="startDateOpen=true"

Answer 2

我的情况，我添加了ng-click，如下所示：

 ng-click="startDateOpen=!startDateOpend"

另外，我删除了ng-focus以防止两个事件影响'startDateOpen'

ng-focus="startDateOpen=true"

Answer 3

因此对于初学者来说：alerts数组根本没有正确使用。有很多代码无法运行，或者没有遵循如何使用alerts

的示例

您无法在任何地方调用任何内容添加到$scope.alerts，将代码<span>alert length: {{ alerts.length}}</span>添加到html，显示长度始终为零。此外，根本不会调用要关闭的代码。即使它位于其中，也无法关闭弹出窗口，因为对它的引用不在$scope.alerts数组中

Answer 4

问题是由此引起的：

ng-focus="vm.open($event,'opened1')"

在我选择日期或在IE9中按关闭后，Angular UI Datepicker没有关闭，在chrome中工作

4 个答案: