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

Posted 2023-05-09

【中文标题】AngularJS UI Bootstrap Datepicker点击外部后下次不打开

【英文标题】：AngularJS UI Bootstrap Datepicker Not opening next time after clicking outside

【发布时间】：2015-04-13 02:10:34

【问题描述】：

我正在使用带有 AngularJS 的 Angular UI 引导程序。我正在使用的版本是 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();
    

当我检查它显示基于 is-opened 以及阻止或无。所以我尝试在点击和更改时显示和隐藏日期选择器（您可以看到代码注释）。但问题是当我在外面点击时日期选择器没有隐藏，因为显示总是被阻止。默认按钮（关闭、今天和清除）第一次会起作用，但如果我下次尝试，它会设置值或清除，但如果我设置显示块，则不会隐藏日期选择器。

这是我导入的 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 中添加了我正在做的事情，但它在那里工作

【问题讨论】：

你能设置一个 jsfiddle 或 codepen 来复制这个问题吗？

@TonyBarnes 我正在尝试。在 Plunker 我看到了很多例子。我也遵循同样的方法。它在那里工作，但不在我的应用程序中。像这样plnkr.co/edit/sFIJSzuuFUk3uh8MZ8he?p=preview

@TonyBarnes 我已经在plnkr.co/edit/m6lslz6zHn2TxyeuvcIq?p=preview 中添加了代码并且它在那里工作

一定有其他原因导致了这个问题。我已经尝试添加一些您正在使用的组件，如果您可以在 plunker 中复制确切的代码/组件以便我们进行调试，那就太好了。

@TonyBarnes 仅此而已。

【参考方案1】：

答案是“输入”您的 Plunker 代码。

您在该代码中拥有使其工作所需的一切，您无需导入任何其他内容，或更改该代码中的任何内容。

但是......这是导致问题的 Plunker 代码中没有的内容。额外的日期选择器、文本框、类样式规则、javascript、其他事件或设置值……等等。如果你简化你的代码直到它可以工作，然后重新添加额外的东西直到它崩溃，你就会看到是什么导致了问题。

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

Here是一个类似问题的解决方案...

【讨论】：

这不是答案，这是一条评论，实际上与 cmets 中讨论的内容完全相同。

他的问题是：“我该如何解决？还有什么要导入的吗？”这回答了这两个问题。没有什么要导入的了，为了解决这个问题，他需要使用在 plunker 上工作的简单代码。他声称没有什么比这里显示的更多了。如果是这样，那么问题就解决了。我知道你同意这一点。 cmets和他的回应很好地指出了这一点。就您而言，是的，答案也在 cmets 中，但这不是答案所在... ;)