How can I prevent $apply already in progress on this case?

Question

I have this example which a basic list with the option to remove items.

When the user tries to remove something, a confirmation is required. But also, to demonstrate which item will be deleted I've changed the table row colour conditionally.

The problem is, I could not make the colour of the selected row change without using $scope.$apply() before the confirm() statement.

$scope.removeEntry = function(index) {
    $scope.entries[index].toBeRemoved = true;
    $scope.$apply();
    if (confirm("Are you sure you want to delete this item?") === true) {
        $scope.entries.splice(index, 1);
    }else{
        $scope.entries[index].toBeRemoved = false;
    }
};

But this gives me:

Error: [$rootScope:inprog] $apply already in progress

Am I missing something or is there any better way to do it and preventing this?

I've already tried almost all suggestions on this answer without success.

why do you call $scope.apply() without any argument? [apply is used to evaluate an argument you pass it](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#pseudo-code-of-apply-) — LionC, Jul 08 '15 at 12:16
I saw it worked without using `$scope.$apply();`. Please try after removing this line. — Vineet, Jul 08 '15 at 12:16
@Vineet: digest cycle will be interrupted by the blocking `confirm` and Patrick needs it finished before that. — Sergio Tulentsev, Jul 08 '15 at 12:18
Both `$timeout` and `$timeouts` didn't work for me. I've also tried the underscore approach on my real application. — Patrick Bard, Jul 08 '15 at 12:18
Show your code with `$timeout`, please. I am preeetty sure it's the way to go. — Sergio Tulentsev, Jul 08 '15 at 12:19
@SergioTulentsev, WIll you please elaborate this line for me ? — Vineet, Jul 08 '15 at 12:19
@Vineet the functionality itself works, agreed. But I want that colour change, it's a minor thing, but important to me. Without `$apply()` is does not change it. — Patrick Bard, Jul 08 '15 at 12:20
@Vineet: it's all in the question. He sets an attribute to highlight a row in the table. For this change to be reflected in the UI, the digest cycle must be run and finished. And it must be finished before `confirm` pops the modal. — Sergio Tulentsev, Jul 08 '15 at 12:21
I think your apply call should really be a digest call, because that is what apply without an argument does (but it looks very confusing) — LionC, Jul 08 '15 at 12:22
@LionC I did not know that was that bad, I am using `$scope.$apply()` because I saw [this answer](http://stackoverflow.com/a/12305082/2137778). — Patrick Bard, Jul 08 '15 at 12:24

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

A solution to your case is to use $timeout from angular: http://plnkr.co/edit/ZDkGMqmwtxh7HSvBEWYp?p=preview

Here is a post on the $apply vs $timeout discussion: Angular $scope.$apply vs $timeout as a safe $apply

$scope.removeEntry = function(index) {
    $scope.entries[index].toBeRemoved = true;
    $timeout(function() {
      if (confirm("Are you sure you want to delete this item?") === true) {
        $scope.entries.splice(index, 1);
      }else{
          $scope.entries[index].toBeRemoved = false;
      }
    })
};

You must have messed up in implementing it properly.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 08 '15 at 12:29

Sergio Tulentsev

226,338
43
373
367

Hahahah, I am so dumb. I did exactly this, but didn't work because I forgot to inject `$timeout` on the controller, obviously. I feel bad now – Patrick Bard Jul 08 '15 at 12:32

score 1 · Answer 2 · edited Jul 08 '15 at 12:43

One more solution to help you out this problem. You could use $evalAsync from Angular.

var app = angular.module('plunker', [])

.controller('ListController', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.entries = [{name:"potatoes"},
                      {name:"tomatoes"},
                      {name:"flour"},
                      {name:"sugar"},
                      {name:"salt"}];

    $scope.removeEntry = function(index) {
        $scope.entries[index].toBeRemoved = true;
        $evalAsync(function() {
          if (confirm("Are you sure you want to delete this item?") === true) {
            $scope.entries.splice(index, 1);
          }else{
              $scope.entries[index].toBeRemoved = false;
          }
        })
    };
}]);

Choosing between $evalAsync and $timeout depends on your circumstance:

If code is queued using $evalAsync from a directive, it should run after the DOM has been manipulated by Angular, but before the browser renders.
If code is queued using $evalAsync from a controller, it should run before the DOM has been manipulated by Angular (and before the browser renders) -- rarely do you want this
if code is queued using $timeout, it should run after the DOM has been manipulated by Angular, and after the browser renders (which may cause flicker in some cases)

I was just looking over `$evalAsync`. Any recommendation why use this instead of `$timeout`? — Patrick Bard, Jul 08 '15 at 12:34
view the edited one .. , will be helpfull because no rendering will be made before data comes — ngLover, Jul 08 '15 at 12:37

How can I prevent $apply already in progress on this case?

2 Answers2