ui.bootstrap.datepicker is-open 在模态下不工作答案

【问题标题】：ui.bootstrap.datepicker is-open not working in modalui.bootstrap.datepicker is-open 在模态下不工作
【发布时间】：2013-12-11 08:15:54
【问题描述】：

我正在使用 Bootstrap UI 日期选择器指令，并且我正在尝试使用一个日期选择器按钮来打开日期选择器弹出窗口，就像在原始示例中一样，但它在模式窗口中不起作用。

见PLUNKER

我做错了什么？

【问题讨论】：

标签： angularjs angularjs-directive angular-ui

【解决方案1】：

只需将：is-open="opened" 改为：

is-open="$parent.opened"

固定演示Plunker

因此相关的 HTML sn-ps 将如下所示：

      <div class="input-group">

          <input type="text" class="form-control" 
                 datepicker-popup="dd.MM.yyyy"
                 ng-model="dt"
                 is-open="$parent.opened"
                 ng-required="true"
                 close-text="Close" />
          <span class="input-group-btn">
          <button style="height:34px;" class="btn btn-default" ng-click="open()">
          <i class="icon-calendar"></i></button> <b><- button not working</b>
          </span>
        </div>

【讨论】：

我为此挠头。感谢您发布此解决方案！怎么会有人知道这样做！？
@SoichiHayashi $parent.xxxx 将阻止子范围创建自己的属性。我认为这就是 datepicker 所做的。
或者一些关于模态的超越范围的东西，yada yada。不完全明显;-)
我可以告诉你，当我特别为我的模态制作一个单独的控制器时，这对我来说根本没有意义。谢谢你，我花了 4 个小时在这上面。但是，迟到总比没有好。你是摇滚明星
我知道我写完这篇文章很久了，但是是否需要更正一些东西才能使日期选择器的选择实际上正确返回到主页？（如果您尝试使用 Plunker，它可以让您选择一个新日期并在模式中更新，但是当您单击“确定”时，主页只会显示原始日期）

【解决方案2】：

我必须设置一个超时才能让它工作：

function toggleStart($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $timeout(function () {
        vm.isStartOpen = !vm.isStartOpen;
    });
}

我的模板如下所示：

<input type="text" class="form-control"
        datepicker-popup ng-model="vm.startDate"
        is-open="vm.isStartOpen" />
<span class="input-group-btn">
    <button type="button" class="btn btn-default"
            ng-click="vm.toggleStart($event)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>

【讨论】：

将状态更改包装在 $timeout 中为我解决了这个问题，但我不确定为什么。库代码中一定有一些问题。

【解决方案3】：

datepicker 指令创建自己的范围，外部无法访问。因此，您可以使用来解决这个问题。

$parent.isopen

或者使用一些对象属性名来避免原型继承，比如

$scope.config.isopen=true;

ng-model="config.isopen" 而不是ng-model="isopen"。

【讨论】：

这比接受的答案要好得多。
这是最优雅的解决方案

【解决方案4】：

您也可以通过图标初始化日期选择器。

HTML

<p class="input-group" ng-disabled="invoiceDateDisable">
    <input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

JavaScript

$scope.open = function () {
    $scope.opened = true;
};

【讨论】：

【解决方案5】：

你真的不需要open 函数：

    <div class="input-group">
        <input type="text" class="form-control"
               datepicker-popup="dd.mm.yyyy"
               ng-model="dt"
               is-open="$parent.opened"
               ng-required="true"
               close-text="Close" />
        <span class="input-group-btn">
        <button style="height:34px;" class="btn btn-default" ng-click="$parent.opened=!$parent.opened">
        <i class="icon-calendar"></i></button> <b><- button not working</b>
        </span>
      </div>

【讨论】：