AngularJS and Fullcalendar: eventClick works only first time

Question

I'm using the Angular module based on fullcalendar: https://github.com/angular-ui/ui-calendar along with the dialog module from ng-bootstrap. I configured the calendar to show a dialog for editing an event on eventClick action. It works fine only once. After closing first dialog and clicking again on any event new dialog doesn't show. But when I click on any other link on page, all desired dialogs shows one by one like they're queued somewhere some way.

Here's snippet from my controller:

 $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]

Events are fetched from REST later in the controller.

In html: <div ui-calendar="calendar" config="calendar" ng-model="eventSources"/>

No errors in console, what am I doing wrong?

Code on plunker: http://plnkr.co/edit/89sQfsU85zN4uxauFI2Y?p=preview

I say first try and see if your showEditVisitDialog function is being called each time you click on calendar. If that's not the case than the problem is in the calendar click event. Otherwise, the problem might in the resolve. — Stewie
@Stewie Checked already, function is being called. I'll try to remove resolve and check if it's causing the problem (but I think it would throw some errors if the resolve is the problem). What do you mean by: " If that's not the case than the problem is in the calendar click event."? — Kacper
I meant, if showEditVisitDialog is not called each time you click on calendar than it might be the calendar who's "queuing" the events (But it seems that you already checked that). It might help if you could reproduce your problem in jsfiddle/plnkr/jsbin. Also, try and attach the AddEditVisitDialogController to your post. Maybe there's something hiding in there. — Stewie
I deleted almost everything from AddEditVisitDialogController. Dialog is closed with button with ng-click set to this function: $scope.saveVisit = function () { dialog.close(); }; I've done some debugging and found that after first time execution never gets to this line:<github.com/angular-ui/bootstrap/blob/master/src/dialog/…> and in consequences to <github.com/angular-ui/bootstrap/blob/master/src/dialog/…>. This lines are executed only after I click some other link/button on page. I had problems with writing it in jsffidle, I'll try tommorow. — Kacper
So, it IS the resolve not being resolved, but I'm clueless why the $dialog can't resolve your patientId and visitId. It's as if these two properties are promisses that get stuck on resolving. — Stewie

Stewie Stewie · Accepted Answer · 2013-05-19T16:20:57

As always, things are simpler and more obvious when there's a fiddle/plnkr available. You need to place your call to showEditVisitDialog inside the $apply function:

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

Working plnkr.

AngularJS and Fullcalendar: eventClick works only first time

2 Answers