Question

我在AngularJS中使用Angular UI bootstrap。我怀疑的版本是 0.11.0 。

我使用了很少的指令，我正在尝试使用日期选择器。在某些情况下，我需要一个表单中的许多日期选择器，或者我可能需要一个日期范围。

我有一个文本字段，文本字段中有一个图标。每当点击任何项目时，我都会打开日期选择器。如果我选择任何日期，它可以正常工作并关闭日期选择器。

但如果我点击日期选择器之外，它就会隐藏日期选择器。但是，如果我再次尝试打开日期选择器，它就不会打开。

这是我的HTML

<div class="col-md-7 controls with-icon-over-input padding-top">
                                <input type="text" class="form-control input-sm"
                                    ng-model="object.date"
                                    id="date" name="date"
                                    datepicker-popup='yyyy/MM/dd' is-open="opened" ng-click="openDatePicker($event)"
                                    datepicker-options="dateOptions" show-button-bar="false" ng-change="close()"
                                    /> <i ng-click="openDatePicker($event)"
                                    class="icon-calendar"></i>
                            </div>

我的 Controller.js 文件

有以下

$scope.dateOptions = {
            formatYear: 'yy',
            startingDay: 1,
            'show-weeks':false
    };

//  var datePickerElemet;

    $scope.openDatePicker = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
//      datePickerElemet = $($event.currentTarget).prev();
//      $(datePickerElemet).show();
        $scope.opened = true;
    }

    $scope.close = function() {
        $scope.opened = false;
//      $(datePickerElemet).hide();
    }

当我检查时，它是基于打开以及阻止或无显示。所以我尝试在点击和更改时显示和隐藏日期选择器（您可以看到代码已注释）。但问题是当我点击外面时日期选择器没有隐藏，因为显示屏始终是阻止。默认按钮（关闭，今天和清除）将首次运行，但下次如果我尝试，则设置值或清除，但如果我设置显示块则不隐藏日期选择器。

以下是我导入JS文件的内容

<script src="assets/javascripts/jquery/jquery.min.js"
    type="text/javascript"></script>

<!-- build:js scripts/ngscripts.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- / jquery ui -->
<script src="assets/javascripts/jquery/jquery-ui.min.js"
    type="text/javascript"></script>

我该如何解决？还有什么我想要导入的吗？

我添加了我在Plunker中所做的事情，但它正在那里工作

Answer 1

答案是你的Plunker代码“IN”。

您可以通过该代码获得所需的一切，无需导入任何其他内容，也无需更改该代码中的任何内容。

但是......你的Plunker代码中没有引起问题的东西。其他日期选择器，文本框，类样式规则，javascript，其他事件或设置值...等。如果您简化代码直到它工作，并添加回其他东西，直到它中断，您将看到导致问题的原因。

您确定没有其他代码没有向我们展示吗？您的范围可能存在问题。

Here是解决类似问题的方法......

AngularJS UI Bootstrap Datepicker下次点击外部后不会打开

1 个答案: