search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Problem clearing events in Angular

Asked by Bert
4 years ago.

I set up an example here: http://jsfiddle.net/stj3xogu/

I'm trying to clear the events on my calendar using a button, and it works just fine if I click the button ONCE, and then proceed to add new events. But if I click on the button twice or multiple times in a row, I can't add new events.

I've been trying to debug this for hours and nothing seems to work. I also tried using "$scope.dp.events.list = []" instead of "$scope.events", but that didn't work either.

Is there a better way to clear all events that would allow me to use the scheduler again?

Thanks!

Answer posted by Dan Letecky [DayPilot]
4 years ago.

A few notes:

1. When performing the operations on the events you can either modify the model or use the direct methods.

The difference is that the direct methods call $apply to notify Angular about the changes.

$scope.dp.events.add(new DayPilot.Event(ev));  // direct API

is an equivalent of

$scope.$apply(function() {
  $scope.events.push(ev);  // modify the model
});

If you call the direct methods in the context that is already executed within $apply you will get "Error: $rootScope:inprog Action Already In Progress". All methods invoked using AngularJS bindings (e.g. ng-click) are automatically executed inside $apply block.

2. If you modify the model, don't call dp.update() but make sure it's inside an $apply() block.

Replace

  $scope.clearEvents = function() {
    $scope.events = [];
    $scope.dp.update();
  };

with

  $scope.clearEvents = function() {
    $scope.events = [];
  };

3. You are replacing the $scope.events object with a new array. The first time this is detected by Angular as a change (the array elements are different). It tells the Scheduler to use the new array. The second time you click it you replace it with yet another array but this time it is not detected by Angular as a new array (both arrays are empty). The Scheduler is not notified and it continues using the old array.

Replace

  $scope.clearEvents = function() {
    $scope.events = [];
  };

with

  $scope.clearEvents = function() {
    $scope.events.splice(o, $scope.events.length);
  };

Comment posted by Dan Letecky [DayPilot]
4 years ago.

See also the fixed example:

http://jsfiddle.net/stj3xogu/3/

Comment posted by Bert
4 years ago.

Ah, that makes sense. Thanks for the assist!

Comment posted by blalond
4 years ago.

Updated fiddle for this in Angular "Controller As" syntax (the above fiddle wasn't working).
http://jsfiddle.net/ekrLajw4/

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.