Angular UI Bootstrap - 弹出日期选择器

Question

我希望在使用 Angular UI Bootstrap 库的组件单击按钮时弹出一个日期选择器。 Angular UI Boostrap 网站上有这两个例子，但我看不到将它们结合起来的方法。我不喜欢将 Datepicker div 作为 popup 指令文本的属性值的想法。

我还尝试在 Datepicker div 上使用 ng-show，但我也无法使用。

这是我目前拥有的代码。

<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'" 添加到要应用弹出框的元素中。

我创建了new example，展示了这个功能。

---

截至 2013 年 7 月 2 日，Angular UI Bootstrap 项目中有一个 open issue，允许您将 HTML 标记放在弹出框内。

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

作为此功能的示例，您可以看到Plunker that I recently forked。

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

编辑

如果您喜欢冒险，我使用的代码基于Pull Request 369，这将导致this commit。

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

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

我可能会在这个周末找一些时间来解决这些问题，以便将其合并到项目中。