fix(viewDirective): $destroy event is triggered before animation ends

when view is animated using ngAnimate, $destroy event is triggered before
animation ends.

closes #1643

Author: Teemu Kokkonen

src/viewDirective.js

@@ -190,32 +190,45 @@ function $ViewDirective(   $state,   $injector,   $uiViewScroll,   $interpolate)
         updateView(true);
 
         function cleanupLastView() {
-          if (previousEl) {
-            previousEl.remove();
-            previousEl = null;
+          var _previousEl = previousEl;
+          var _currentScope = currentScope;
+
+          if (_currentScope) {
+            _currentScope._willBeDestroyed = true;
           }
 
-          if (currentScope) {
-            currentScope.$destroy();
-            currentScope = null;
+          function cleanOld() {
+            if (_previousEl) {
+              _previousEl.remove();
+            }
+
+            if (_currentScope) {
+              _currentScope.$destroy();
+            }
           }
 
           if (currentEl) {
             renderer.leave(currentEl, function() {
+              cleanOld();
               previousEl = null;
             });
 
             previousEl = currentEl;
-            currentEl = null;
+          } else {
+            cleanOld();
+            previousEl = null;
           }
+
+          currentEl = null;
+          currentScope = null;
         }
 
         function updateView(firstTime) {
           var newScope,
               name            = getUiViewName(scope, attrs, $element, $interpolate),
               previousLocals  = name && $state.$current && $state.$current.locals[name];
 
-          if (!firstTime && previousLocals === latestLocals) return; // nothing to do
+          if (!firstTime && previousLocals === latestLocals || scope._willBeDestroyed) return; // nothing to do
           newScope = scope.$new();
           latestLocals = $state.$current.locals[name];
 

test/viewDirectiveSpec.js

@@ -4,7 +4,7 @@
 describe('uiView', function () {
   'use strict';
 
-  var scope, $compile, elem;
+  var log, scope, $compile, elem;
 
   beforeEach(function() {
     var depends = ['ui.router'];
@@ -27,6 +27,10 @@ describe('uiView', function () {
     });
   }));
 
+  beforeEach(function() {
+    log = '';
+  });
+
   var aState = {
     template: 'aState template'
   },
@@ -112,6 +116,19 @@ describe('uiView', function () {
       .state('j', jState)
       .state('k', kState)
       .state('l', lState)
+      .state('m', {
+        controller: function($scope) {
+          log += 'm;';
+          $scope.$on('$destroy', function() {
+            log += '$destroy(m);';
+          });
+        },
+      })
+      .state('n', {
+        controller: function($scope) {
+          log += 'n;';
+        },
+      });
   }));
 
   beforeEach(inject(function ($rootScope, _$compile_) {
@@ -122,6 +139,23 @@ describe('uiView', function () {
 
   describe('linking ui-directive', function () {
 
+    it('$destroy event is triggered after animation ends', inject(function($state, $q, $animate) {
+      elem.append($compile('<div><ui-view></ui-view></div>')(scope));
+
+      $state.transitionTo('m');
+      $q.flush();
+      expect(log).toBe('m;');
+      $state.transitionTo('n');
+      $q.flush();
+      if ($animate) {
+        expect(log).toBe('m;n;');
+        $animate.triggerCallbacks();
+        expect(log).toBe('m;n;$destroy(m);');
+      } else {
+        expect(log).toBe('m;$destroy(m);n;');
+      }
+    }));
+
     it('anonymous ui-view should be replaced with the template of the current $state', inject(function ($state, $q) {
       elem.append($compile('<div><ui-view></ui-view></div>')(scope));