2

我正在开发一个使用 Twitter Bootstrap 和 AngularJS 构建的网站。日历输入栏会弹出一个日历，使用的是datepicker。这是代码：

    <div class="control-group {{errors.start_date.class}}">
      <label class="control-label">Start Date</label>
      <div class="controls">
        <input type="text" class="input-small" value="{{round.start_date | date:'MM/dd/yyyy'}}" data-ng-model="round.start_date" id="start_date" onfocus="$('#start_date').datepicker({format:'mm/dd/yyyy'});$('#start_date').datepicker('show');" required>
         <span class="help-block" data-ng-show="errors.start_date">{{errors.start_date.message}}</span>
      </div>
    </div>

选择日期后，我单击日历弹出窗口之外的区域，但弹出窗口不会关闭。我尝试添加“autoclose：'true'”，如下面的代码所示，但弹出窗口仍然不会关闭。

    <div class="control-group {{errors.start_date.class}}">
      <label class="control-label">Start Date</label>
      <div class="controls">
        <input type="text" class="input-small" value="{{round.start_date | date:'MM/dd/yyyy'}}" data-ng-model="round.start_date" id="start_date" onfocus="$('#start_date').datepicker({format:'mm/dd/yyyy','autoclose':true});$('#start_date').datepicker('show');" required>
         <span class="help-block" data-ng-show="errors.start_date">{{errors.start_date.message}}</span>
      </div>
    </div>

有人知道如何解决这个问题吗？实际上，如果日历弹出窗口在我单击日期后也会关闭，那就太好了。

2012-12-03 更新：以前，我已将 jquery-ui-1.9.2.custom.min.js 和此代码添加到我的控制器中：

$(".modal").draggable();

这就是我在日历弹出窗口之外单击时无法关闭它的原因。当我删除它们时，我可以关闭日历。但是，我希望能够使模态窗口可拖动并关闭日历。有没有办法做到这两点？此外，当我单击日期时，我仍然无法关闭日历。有人有什么建议吗？

4

1 回答 1

1

当使用 AngularJS 包含外部库时，您通常需要将它们包装在指令中，以便双向数据绑定和 DOM 事件正常工作。文档链接：AngularJS 指令

Twitter Bootstrap 和 jQuery UI 中的许多元素已经被 AngularUI 上的一群人方便地打包了，你可以在这里找到它们：http: //angular-ui.github.com/。

以下是 date 指令的源代码：httpslink ://github.com/angular-ui/angular-ui/blob/master/modules/directives/date/date.js ，AngularJS 将在函数中执行代码后加载指令，这是通常的 datepicker 事件侦听器的附加位置。

下面是一些示例代码，展示了 Twitter Bootstrap 表单 + 日期选择器输入在 AngularUI 中的外观，其中属性data-ui-date向 AngularJS 编译过程表明该元素是指令。您也可以省略该data部分，只将属性设置为ui-date.

    <div class="control-group">
        <label class="control-label">Start Date</label>
        <div class="controls">
            <input data-ng-model="round.start_date" data-ui-date="dateOptions" name="datepicker" type="text" class="input-medium" placeholder="">
        </div>
    </div>

dateOptions只是在控制器或指令中某处设置的范围值，如下所示：

    $scope.dateOptions = {
        changeYear: false,
        changeMonth: false,
        nextText: '<i class=icon-arrow-right></i>',
        prevText: '<i class=icon-arrow-left></i>',
        dateFormat: 'yy-mm-dd'
    };
于 2012-12-03T01:56:06.607 回答