Angular UI Bootstrap - Popup Datepicker

Question

我希望在使用Angular UI Bootstrap库的组件单击按钮时有一个datepicker弹出窗口.Angular UI Boostrap网站上有两个例子,但我没有看到将它们组合起来的方法.我不喜欢将Datepicker div作为popup指令文本的属性值.

我也尝试ng-show在Datepicker 上使用,div但我也不能这样做.

这是我目前的代码.

<div ng-controller="DatepickerCtrl" class="input-append">
        <input class="input-small ng-pristine ng-valid" 
                type="text" 
                ng-value="dt" />
        <button type="button" 
                class="btn" 
                popover-placement="right"
                ng-click"showDatePicker=true"      // the show when clicked strategy
                popover="On the Right!">           // Don't see a way to make this encapsulate a div
                    <i class="icon-calendar"></i>
        </button>
        <datepicker ng-model="dt"
                    ng-show="showDatePicker"  
                    starting-day="1"
                    date-disabled="disabled(date, mode)"
                    min="minDate" max="'2015-06-22'">
        </datepicker>
 </div>

我真的不喜欢这个ng-show策略.宁愿让它成为一个流行音乐,但我认为有办法做得更好,所以我也不介意.

Answer 1

更新 2015-08-16 - 从Angular UI Bootstrap 0.13.0开始,此功能现已包含在内!它与我下面描述的非常相似.要使用此功能,请添加popover-template="'mytemplate.html'"要应用弹出窗口的元素.

我创建了一个显示此功能的新示例.

截至2013-07-02,Angular UI Bootstrap项目存在一个开放性问题,允许您将HTML标记放在弹出窗口中.

如果/何时合并了此更改,您将能够将一个日期选择器放入模板中,然后通过添加popover-template="mytemplate.html"到您已声明弹出窗口的元素来引用此模板.

作为此功能的一个示例,您可以看到我最近分叉的Plunker.

随着情况的变化,我会更新这个答案.

编辑

如果您有冒险精神,我使用的代码基于Pull Request 369,这将导致此提交.

我知道有三个原因尚未合并提交的原因:

1. 当销毁父作用域时,需要清除范围.Pawel Kozlowski在我提交的提交中发表的评论中提到了这一点.
2. 打开,关闭和重新打开弹出窗口会导致弹出窗口重新打开时绑定到范围中断.我在问题220中发布了一个解决方法(上面链接的相同问题).
3. 目前还没有任何测试.

我可能会在本周末找一些时间处理这些问题,以便将它合并到项目中.