feat(ionNavAnimation): <a href="#/page" ion-nav-animation="slide-in-up">

Author: ajoslin

js/ext/angular/src/directive/ionNavAnimation.js

@@ -0,0 +1,15 @@
+angular.module('ionic.ui.navAnimation', [])
+.directive('ionNavAnimation', function() {
+  return {
+    restrict: 'A',
+    require: '^?ionNavView',
+    link: function($scope, $element, $attrs, navViewCtrl) {
+      if (!navViewCtrl) {
+        return;
+      }
+      ionic.on('tap', function() {
+        navViewCtrl.setNextAnimation($attrs.ionNavAnimation);
+      }, $element[0]);
+    }
+  };
+});

js/ext/angular/src/directive/ionicViewState.js

@@ -295,7 +295,6 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
   };
 }])
 
-
 .directive('ionNavView', ['$ionicViewService', '$state', '$compile', '$controller', '$animate',
               function( $ionicViewService,   $state,   $compile,   $controller,   $animate) {
   // IONIC's fork of Angular UI Router, v0.2.7
@@ -307,9 +306,13 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
     terminal: true,
     priority: 2000,
     transclude: true,
-    controller: function() {}, //noop controller so this can be required
+    controller: ['$scope', function($scope) {
+      this.setNextAnimation = function(anim) {
+        $scope.$nextAnimation = anim;
+      };
+    }],
     compile: function (element, attr, transclude) {
-      return function(scope, element, attr) {
+      return function(scope, element, attr, navViewCtrl) {
         var viewScope, viewLocals,
             name = attr[directive.name] || attr.name || '',
             onloadExp = attr.onload || '',
@@ -351,7 +354,6 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
           if (locals === viewLocals) return; // nothing to do
           var renderer = $ionicViewService.getRenderer(element, attr, scope);
 
-
           // Destroy previous view scope
           if (viewScope) {
             viewScope.$destroy();

js/ext/angular/src/service/ionicView.js

@@ -384,17 +384,26 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
       var doAnimation;
 
       // climb up the DOM and see which animation classname to use, if any
-      var animationClass = null;
-      var el = navViewElement[0];
-      while(!animationClass && el) {
-        animationClass = el.getAttribute('animation');
-        el = el.parentElement;
+      var animationClass = angular.isDefined(navViewScope.$nextAnimation) ?
+        navViewScope.$nextAnimation :
+        getParentAnimationClass(navViewElement[0]);
+
+      navViewScope.$nextAnimation = undefined;
+
+      function getParentAnimationClass(el) {
+        var className = '';
+        while(!className && el) {
+          className = el.getAttribute('animation');
+          el = el.parentElement;
+        }
+        return className;
       }
-      el = null;
 
       function setAnimationClass() {
         // add the animation CSS class we're gonna use to transition between views
-        navViewElement[0].classList.add(animationClass);
+        if (animationClass) {
+          navViewElement[0].classList.add(animationClass);
+        }
 
         if(registerData.navDirection === 'back') {
           // animate like we're moving backward
@@ -421,6 +430,9 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
 
               $animate.enter(element, navViewElement, null, function() {
                 document.body.classList.remove('disable-pointer-events');
+                if (animationClass) {
+                  navViewElement[0].classList.remove(animationClass);
+                }
               });
               return;
             }

js/ext/angular/test/directive/ionicNavAnimation.unit.js

@@ -0,0 +1,41 @@
+describe('ionNavAnimation directive', function() {
+  beforeEach(module('ionic.ui.navAnimation'));
+
+  var navViewCtrl;
+  function setup(anim, noNavViewCtrl) {
+    if (noNavViewCtrl) {
+      navViewCtrl = null;
+    } else {
+      navViewCtrl = {
+        setNextAnimation: jasmine.createSpy('setNextAnimation')
+      };
+    }
+    var element = angular.element(
+      '<div ion-nav-animation="'+(anim||'')+'"></div>'
+    );
+    element.data('$ionNavViewController', navViewCtrl);
+    inject(function($compile, $rootScope) {
+      $compile(element)($rootScope.$new());
+    });
+
+    return element;
+  }
+
+  it('should not listen for tap if no navViewCtrl', function() {
+    spyOn(ionic, 'on');
+    setup('', true);
+    expect(ionic.on).not.toHaveBeenCalled();
+  });
+
+  it('should listen for tap', function() {
+    spyOn(ionic, 'on');
+    var el = setup('');
+    expect(ionic.on).toHaveBeenCalledWith('tap', jasmine.any(Function), el[0]);
+  });
+
+  it('should call navViewCtrl.setNextAnimation on tap', function() {
+    var el = setup('foobar');
+    ionic.trigger('tap', { target: el[0] });
+    expect(navViewCtrl.setNextAnimation).toHaveBeenCalledWith('foobar');
+  });
+});

js/ext/angular/test/viewState.html

@@ -140,7 +140,7 @@ <h3>Information</h3>
       <ion-view title="'Auto List'">
         <ion-content has-header="true" has-tabs="true">
           <ion-list>
-            <ion-item ng-repeat="auto in autos" ng-href="#/tabs/autos/{{ $index }}">
+            <ion-item ng-repeat="auto in autos" ng-href="#/tabs/autos/{{ $index }}" ion-nav-animation="{{$index === 0 ? 'slide-in-up' : 'slide-left-right'}}">
               {{ auto.year }} {{ auto.make }} {{ auto.model }}
             </ion-item>
           </ion-list>