Question

我正在使用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();

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

Answer 1

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

来自Twitter Bootstrap和jQuery UI的许多元素已经由AngularUI上的一群人方便地为您包装，您可以在这里找到它们：http://angular-ui.github.com/。

这是date指令的源代码：https://github.com/angular-ui/angular-ui/blob/master/modules/directives/date/date.js，AngularJS将在加载指令后执行link函数内的代码，该指令是附加常用的datepicker事件侦听器的地方。 / p>

下面是一些关于Twitter Bootstrap表单+ datepicker输入如何与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'
    };

带有Twitter Bootstrap的AngularJS DatePicker在点击外部后没有关闭

1 个答案: