ui.bootstrap.datepicker is-open无法在模态中工作

我使用Bootstrap UI的datepicker指令，我试图有一个datepickerbutton，像在原来的例子中打开datepickerpopup，但它不能在模式窗口中工作。

参见PLUNKER

我究竟做错了什么？

Answer 1

只要改成： is-open="opened"到：

 is-open="$parent.opened" 

修正了Demo 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指令创build它自己的范围，这是外面不能访问。所以要解决这个问题，你可以使用。

 $parent.isopen 

或者使用一些Object属性名来避免原型inheritance

 $scope.config.isopen=true; 

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

Answer 4

你也是这样工作的初始化dateselect器的图标。

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

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