AngularJS 和 Fullcalendar：eventClick 仅在第一次工作答案

【问题标题】：AngularJS and Fullcalendar: eventClick works only first timeAngularJS 和 Fullcalendar：eventClick 仅在第一次工作
【发布时间】：2013-05-18 19:58:55
【问题描述】：

我正在使用基于 fullcalendar 的 Angular 模块：https://github.com/angular-ui/ui-calendar 以及来自 ng-bootstrap 的对话框模块。我将日历配置为显示一个对话框，用于在 eventClick 操作上编辑事件。它只工作一次。关闭第一个对话框并再次单击任何事件后，新对话框不会显示。但是当我点击页面上的任何其他链接时，所有想要的对话框都会一一显示，就像它们在某个地方排队一样。

这是来自我的控制器的 sn-p：

 $scope.showEditVisitDialog = function (event) {
    var editVisitDialogOpts = {
        backdropClick: false,
        templateUrl: 'views/addEditVisitDialog.html',
        controller: 'AddEditVisitDialogController',
        resolve: {
            patientId: function () {
                return event.patientId;
            },
            visitId: function () {
                return event.id;
            }
        }
    };
    var editVisitDialog = $dialog.dialog(editVisitDialogOpts);
    editVisitDialog.open().then(function (updatedVisit) {
    //some action
    });
};


$scope.calendar = {
    height: 450,
    editable: true,
    header: {
        left: 'month agendaWeek ',
        center: 'title',
        right: 'today prev,next'
    },
    eventClick: $scope.showEditVisitDialog
};
$scope.events = [];
$scope.eventSources = [$scope.events]

稍后在控制器中从 REST 获取事件。

在 html 中： <div ui-calendar="calendar" config="calendar" ng-model="eventSources"/>

控制台没有错误，我做错了什么？

plunker 上的代码：http://plnkr.co/edit/89sQfsU85zN4uxauFI2Y?p=preview

【问题讨论】：

我说先试试看你的showEditVisitDialog函数是否在你每次点击日历时被调用。如果不是这种情况，则问题出在日历点击事件中。否则，问题可能正在解决中。
@Stewie 已检查，正在调用函数。我将尝试删除解决并检查它是否导致问题（但我认为如果解决是问题，它会引发一些错误）。您的意思是：“如果不是这种情况，那么问题出在日历点击事件中。”？
我的意思是，如果每次单击日历时都没有调用showEditVisitDialog，那么它可能是日历“排队”事件（但似乎您已经检查过了）。如果您可以在 jsfiddle/plnkr/jsbin 中重现您的问题，这可能会有所帮助。另外，尝试将 AddEditVisitDialogController 附加到您的帖子中。也许里面藏着什么东西。
我从 AddEditVisitDialogController 中删除了几乎所有内容。对话框关闭，带有 ng-click 的按钮设置为此函数： $scope.saveVisit = function () { dialog.close(); };我做了一些调试，发现在第一次执行后永远不会到达这一行：github.com/angular-ui/bootstrap/blob/master/src/dialog/…> 并导致 github.com/angular-ui/bootstrap/blob/master/src/dialog/…>。只有在我单击页面上的其他链接/按钮后才会执行此行。我在用 jsffidle 编写它时遇到了问题，我会在明天尝试。
所以，这是未解决的解决方案，但我不知道为什么 $dialog 无法解决您的patientId 和visitId。就好像这两个属性是在解决时卡住的承诺。

标签： javascript angularjs fullcalendar

【解决方案1】：

与往常一样，当有可用的小提琴/plnkr 时，事情会变得更简单、更明显。您需要在 $apply 函数中调用 showEditVisitDialog：

...
$scope.calendar = {
  editable: true,
  eventClick: function(){
    $scope.$apply(function(){
      $scope.showEditVisitDialog()
    });
  }
};
...

工作plnkr。

【讨论】：

谢谢，它成功了 ;-)。我不确定 $scope.$apply 的作用，但我稍后会阅读。
这也适用于 angular-strap 的模态服务。这是如何工作的？

【解决方案2】：

您需要在日历的 uiConfig 之前声明您的功能；）

【讨论】：