admin管理员组

文章数量:1312923

I'm using the Angular module based on fullcalendar: 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:

I'm using the Angular module based on fullcalendar: https://github./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

Share Improve this question edited May 19, 2013 at 11:47 Kacper asked May 18, 2013 at 19:58 KacperKacper 331 silver badge4 bronze badges 8
  • 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 Commented May 18, 2013 at 21:15
  • @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 Commented May 18, 2013 at 21:26
  • 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 Commented May 18, 2013 at 21:38
  • 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./angular-ui/bootstrap/blob/master/src/dialog/…> and in consequences to <github./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 Commented May 18, 2013 at 23:59
  • 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 Commented May 19, 2013 at 7:41
 |  Show 3 more ments

2 Answers 2

Reset to default 4

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.

you need to declare you fnction before uiConfig for the calendar ;)

本文标签: javascriptAngularJS and Fullcalendar eventClick works only first timeStack Overflow