cherry-pick 2523bbd from 0.2.17

Author: christopherthielen

src/ng1/viewDirective.ts

@@ -1,3 +1,5 @@
+var ngMajorVer = angular.version.major;
+var ngMinorVer = angular.version.minor;
 /** @module view */ /** for typedoc */
 /// <reference path='../../typings/angularjs/angular.d.ts' />
 
@@ -31,6 +33,9 @@ import {UIViewData} from "../view/interface";
  * service, {@link ui.router.state.$uiViewScroll}. This custom service let's you
  * scroll ui-view elements into view when they are populated during a state activation.
  *
+ * @param {string=} noanimation If truthy, the non-animated renderer will be selected (no animations
+ * will be applied to the ui-view)
+ *
  * *Note: To revert back to old [`$anchorScroll`](http://docs.angularjs.org/api/ng.$anchorScroll)
  * functionality, call `$uiViewScrollProvider.useAnchorScroll()`.*
  *
@@ -124,16 +129,26 @@ $ViewDirective.$inject = ['$view', '$animate', '$uiViewScroll', '$interpolate',
 function $ViewDirective(   $view,   $animate,   $uiViewScroll,   $interpolate,   $q) {
 
   function getRenderer(attrs, scope) {
+
+    function animEnabled(element) {
+      if (!!attrs.noanimation) return false;
+      return (ngMajorVer === 1 && ngMinorVer >= 4) ? !!$animate.enabled(element) : !!$animate.enabled();
+    }
+
     return {
       enter: function(element, target, cb) {
-        if (angular.version.minor > 2) {
+        if (!animEnabled(element)) {
+          target.after(element); cb();
+        } else if (angular.version.minor > 2) {
           $animate.enter(element, null, target).then(cb);
         } else {
           $animate.enter(element, null, target, cb);
         }
       },
       leave: function(element, cb) {
-        if (angular.version.minor > 2) {
+        if (!animEnabled(element)) {
+          element.remove(); cb();
+        } else if (angular.version.minor > 2) {
           $animate.leave(element).then(cb);
         } else {
           $animate.leave(element, cb);

test/viewDirectiveSpec.js

@@ -12,7 +12,7 @@ describe('uiView', function () {
   var log, scope, $compile, elem;
 
   beforeEach(function() {
-    var depends = ['ui.router'];
+    var depends = ['ui.router', 'ui.router.state.events'];
 
     try {
       angular.module('ngAnimate');
@@ -26,7 +26,8 @@ describe('uiView', function () {
     module('ui.router.test');
   });
 
-  beforeEach(module(function ($provide) {
+  beforeEach(module(function ($provide, $stateEventsProvider) {
+    $stateEventsProvider.enable();
     $provide.decorator('$uiViewScroll', function () {
       return jasmine.createSpy('$uiViewScroll');
     });
@@ -132,17 +133,13 @@ describe('uiView', function () {
       .state('m', {
         template: 'mState',
         controller: function($scope) {
-          log += 'm;';
-          $scope.$on('$destroy', function() {
-            log += '$destroy(m);';
-          });
-        },
+          log += 'ctrl(m);';
+          $scope.$on('$destroy', function() { log += '$destroy(m);'; });
+        }
       })
       .state('n', {
         template: 'nState',
-        controller: function($scope) {
-          log += 'n;';
-        },
+        controller: function($scope) { log += 'ctrl(n);'; }
       })
       .state('o', oState)
   }));
@@ -155,23 +152,6 @@ 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;');
-        animateFlush($animate);
-        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));
 
@@ -610,6 +590,53 @@ describe('uiView', function () {
       // No more animations
       expect($animate.queue.length).toBe(0);
     }));
+
+    it ('should disable animations if noanimation="true" is present', inject(function($state, $q, $compile, $animate) {
+      var content = 'Initial Content', animation;
+      elem.append($compile('<div><ui-view noanimation="true">' + content + '</ui-view></div>')(scope));
+
+      animation = $animate.queue.shift();
+      expect(animation).toBeUndefined();
+
+      $state.transitionTo(aState);
+      $q.flush();
+      animation = $animate.queue.shift();
+      expect(animation).toBeUndefined();
+      expect(elem.text()).toBe(aState.template);
+
+      $state.transitionTo(bState);
+      $q.flush();
+      animation = $animate.queue.shift();
+      expect(animation).toBeUndefined();
+      expect(elem.text()).toBe(bState.template);
+    }));
+
+    describe('$destroy event', function() {
+      it('is triggered after animation ends', inject(function($state, $q, $animate, $rootScope) {
+        elem.append($compile('<div><ui-view></ui-view></div>')(scope));
+
+        $state.transitionTo('m');
+        $q.flush();
+        expect(log).toBe('ctrl(m);');
+        $state.transitionTo('n');
+        $q.flush();
+
+        expect(log).toBe('ctrl(m);ctrl(n);');
+        animateFlush($animate);
+        expect(log).toBe('ctrl(m);ctrl(n);$destroy(m);');
+      }));
+
+      it('is triggered before $stateChangeSuccess if noanimation is present', inject(function($state, $q, $animate, $rootScope) {
+        elem.append($compile('<div><ui-view noanimation="true"></ui-view></div>')(scope));
+
+        $state.transitionTo('m');
+        $q.flush();
+        expect(log).toBe('ctrl(m);');
+        $state.transitionTo('n');
+        $q.flush();
+        expect(log).toBe('ctrl(m);$destroy(m);ctrl(n);');
+      }));
+    });
   });
 });