11

我希望在使用 Angular UI Bootstrap 库的组件单击按钮时弹出一个日期选择器。Angular UI Boostrap网站上都有这两种方法的示例，但我没有看到将它们结合起来的方法。我不喜欢将 Datepickerdiv作为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策略。宁愿它是一个弹出窗口，但我认为也有办法做得更好，所以我也不介意。

4

1 回答 1

13

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

我创建了一个新的例子来展示这个特性。

截至 2013 年 7 月 2 日，Angular UI Bootstrap 项目存在一个未解决的问题，允许您将 HTML 标记放在弹出窗口中。

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

作为此功能的示例，您可以看到我最近 fork 的 Plunker。

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

编辑

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

关于提交尚未合并的原因，我知道有三个原因：

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

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

于 2013-07-02T19:39:43.043 回答