cherry-pick 1be1379 from 0.2.17

Author: Teemu Kokkonen

src/ng1/viewDirective.ts

@@ -179,7 +179,7 @@ function $ViewDirective(   $view,   $animate,   $uiViewScroll,   $interpolate,
         trace.traceUiViewEvent("Linking", viewData);
 
         function configUpdatedCallback(config?: ViewConfig) {
-          if (configsEqual(viewConfig, config)) return;
+          if (configsEqual(viewConfig, config) || scope._willBeDestroyed) return;
           trace.traceUiViewConfigUpdated(viewData, config && config.context);
 
           viewConfig = config;
@@ -197,27 +197,42 @@ function $ViewDirective(   $view,   $animate,   $uiViewScroll,   $interpolate,
         });
 
         function cleanupLastView() {
-          if (previousEl) {
-            trace.traceUiViewEvent("Removing    (previous) el", viewData);
-            previousEl.remove();
-            previousEl = null;
+          var _previousEl = previousEl;
+          var _currentScope = currentScope;
+
+          if (_currentScope) {
+            _currentScope._willBeDestroyed = true;
           }
 
-          if (currentScope) {
-            trace.traceUiViewEvent("Destroying  (previous) scope", viewData);
-            currentScope.$destroy();
-            currentScope = null;
+          function cleanOld() {
+            if (_previousEl) {
+              trace.traceUiViewEvent("Removing    (previous) el", viewData);
+              _previousEl.remove();
+              _previousEl = null;
+            }
+
+            if (_currentScope) {
+              trace.traceUiViewEvent("Destroying  (previous) scope", viewData);
+              _currentScope.$destroy();
+              _currentScope = null;
+            }
           }
 
           if (currentEl) {
             trace.traceUiViewEvent("Animate out (previous)", viewData);
             renderer.leave(currentEl, function() {
+              cleanOld();
               previousEl = null;
             });
 
             previousEl = currentEl;
-            currentEl = null;
+          } else {
+            cleanOld();
+            previousEl = null;
           }
+
+          currentEl = null;
+          currentScope = null;
         }
 
         function updateView(config?: ViewConfig) {

test/viewDirectiveSpec.js

@@ -4,7 +4,7 @@ var uiRouter = require("angular-ui-router");
 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'
   },
@@ -98,8 +102,9 @@ describe('uiView', function () {
       }
     }
   },
-  mState = {
-    template: 'mState',
+
+  oState = {
+    template: 'oState',
     controller: function ($scope, $element) {
       $scope.elementId = $element.attr('id');
     }
@@ -119,7 +124,22 @@ describe('uiView', function () {
       .state('j', jState)
       .state('k', kState)
       .state('l', lState)
-      .state('m', mState)
+      .state('m', {
+        template: 'mState',
+        controller: function($scope) {
+          log += 'm;';
+          $scope.$on('$destroy', function() {
+            log += '$destroy(m);';
+          });
+        },
+      })
+      .state('n', {
+        template: 'nState',
+        controller: function($scope) {
+          log += 'n;';
+        },
+      })
+      .state('o', oState)
   }));
 
   beforeEach(inject(function ($rootScope, _$compile_) {
@@ -130,6 +150,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));
 
@@ -315,11 +352,11 @@ describe('uiView', function () {
   }));
 
   it('should instantiate a controller with both $scope and $element injections', inject(function ($state, $q) {
-    elem.append($compile('<div><ui-view id="mState">{{elementId}}</ui-view></div>')(scope));
-    $state.transitionTo(mState);
+    elem.append($compile('<div><ui-view id="oState">{{elementId}}</ui-view></div>')(scope));
+    $state.transitionTo(oState);
     $q.flush();
 
-    expect(elem.text()).toBe('mState');
+    expect(elem.text()).toBe('oState');
   }));
 
   describe('play nicely with other directives', function() {