ui.bootstrap.datepicker is-open在modal中不起作用

Question

我正在使用Bootstrap UI datepicker指令,我正在尝试使用datepicker按钮打开日期选择器弹出窗口,就像在原始示例中一样,但它在模态窗口中不起作用.

见PLUNKER

我究竟做错了什么？

Answer 1

只需改为:is-open="opened"to:

is-open="$parent.opened"

修正了演示 Plunker

所以HTML的相关片段将如下所示:

      <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>

Answer 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>

Answer 3

datepicker指令创建自己的范围,无法在外部访问.因此,您可以使用.

$parent.isopen 

或者使用一些Object属性名来避免原型继承,比如

$scope.config.isopen=true;

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