$destroy event is triggered on leaving view before animation/transition ends

[ghoullier]

When animations are associated to a view using ngAnimate, $destroy event is triggered on leaving view before animation/transition ends.

This event should be triggered after animation/transition end?

Plunker

angular@1.3.6
angular-animate@1.3.6
ui-router@0.2.13

[Roman-Didenko]

+1

[philBrown]

This is because this part in cleanupLastView() doesn't wait for the renderer.leave promise

if (currentScope) {
    currentScope.$destroy();
    currentScope = null;
}

[nateabele]

Okay, so, I guess it should?

[philBrown]

@nateabele yes, because until the animation completes, the leaving state's scope is still relevant.

For example, I have an Highcharts chart in my view (using highcharts-ng). When I transition to another state via an animation, the chart is destroyed (and removed from the DOM) before the animation completes.

[nateabele]

Well, I'll patch it as soon as I can, unless you think you can do it faster.

[manro]

I think this code change would help:

Current cleanupLastView function:

function cleanupLastView() {
  if (previousEl) {
    previousEl.remove();
    previousEl = null;
  }

  if (currentScope) {
    currentScope.$destroy();
    currentScope = null;
  }

  if (currentEl) {
    renderer.leave(currentEl, function() {
      previousEl = null;
    });

    previousEl = currentEl;
    currentEl = null;
  }
}

cleanupLastView function with deferred animate-out element scope destroy:

function cleanupLastView() {
  if (currentEl) {
      (function(previousEl, currentScope) {
          renderer.leave(currentEl, function() {
              if (previousEl) {
                  previousEl.remove();
                  previousEl = null;
              }
              if (currentScope) {
                  currentScope.$destroy();
                  currentScope = null;
               }

               previousEl = null;
               currentScope = null;
          });
      })(previousEl, currentScope);
  } else {
      if (previousEl) {
          previousEl.remove();
          previousEl = null;
      }
      if (currentScope) {
          currentScope.$destroy();
          currentScope = null;
      }
  }
  previousEl = currentEl;
  currentEl = null;
}

[nateabele]

Great. PR + unit test?