问为什么AngularJS吞下事件并导致jQueryUI日历(数据报警器)不显示？

EN

我采纳了angabriel的建议，并学会了如何使用指令正确地做到这一点。您可以看到它在以下位置工作：显示jQueryUI日历的快捷键

为了让这一切顺利进行，付出了太多的努力。道路!

您只需单击Add按钮，就可以通过ng-重复指令插入一个新行，然后您将看到日历文本框和日历按钮。看起来会是这样的：

​

我使用在/ by：https://github.com/angular-ui/ui-date上创建的指令，您需要的所有代码都位于date.js文件中的src目录中。

当然，还需要添加对jQuery和jQueryUI的引用。

角模

一旦您这样做，您需要初始化您的角度模块，如下所示：

var myAppModule = angular.module('extra', ['ui.date']);
 myAppModule.controller('taskController', taskController);

注意，angular.module调用的第二个参数是对date.js文件中的角指令的引用。

标记示例

<div class="control-group input-append input-group" >
          <input id="{{l.id}}cb"
           class="input form-control cb" ui-date="dateOptions"
           ui-date-format="DD, d MM, yy" value="{{l.completedBy}}"
          value="completedBy" type="text" data-ng-model="l.completedBy" /> 
          <span class="btn input-group-addon add-on" 
                  data-ng-click="showCalendar(l.id,'cb')" >
           <span class="glyphicon glyphicon-calendar"></span>
       </span>

注意，ui-date元素上的<input属性是引用，它将文本框转换为数据报警器。

配置jQueryUI数据报警器:传递到AngularJS指令

dateOptions项是一个对象，它可以与值一起发送以设置您的数据报警器，并且与jQueryUI相关。

在我的控制器顶部，我设置了以下选项，这些选项迫使datepicker显示月和年下拉列表。

$scope.dateOptions ={ changeYear: true，changeMonth: true }；

看起来是这样的：

​

​

只在您单击“文本框”部分时才有效。

问题是，只有单击文本框部分时才会出现数据报警器。还有更多工作要做。

我在我的(引导)按钮上添加了一个ng点击，然后在我的控制器中添加了一个处理日历显示的方法。看起来是这样的：

function showCalendar(id,datepickerType)
{
    $("#"+id+datepickerType).datepicker("show");
    console.log(id + " : " + datepickerType);
}

挑战

问题是，您必须有一种方法来连接日历，它显示的是输出值，即原始数据报警器。这成为一个挑战，因为我们可以有一个未知数目的行数未知的数据显示器和相关的“文本”框。请注意我如何进行jQuery选择以获得正确的值，因此当您选择一个值时，它会落在正确的datepicker文本框中。

注意到：我使用的是角v1.2.3，而且它都在工作。开始在jsfiddle上设置示例，该示例目前只支持AngularJS v1.2.1，并且该示例不起作用--日历不会弹出。将CDN添加到最新版本的AngularJS v.1.2.6中，并开始工作。