AngularJS: Directive: Animation of sliding pages and controller binding

Question

I'm trying to figure out how to defer default controller binding and apply it only within the directive once a specific animation (custom, not angular) has been performed on the DOM element with the content. The script for what I'm trying to execute is here, although it immediately replaces the content - until the rolling animation ends: http://jsfiddle.net/scabro/hHy7s/27/

I need to postpone the $ scope binding until the page container completes sliding / animating, and then replaces the contents with data from the controller, and once that is done, bounce back.

Here I have:

HTML:

<div id="wrapper" ng-app="myApp"> <div page-animate> <p> <a class="btn btn-primary" href="#/" ng-click="slidePage()">Home</a> <a class="btn btn-info" href="#/users" ng-click="slidePage()">Users</a> <a class="btn btn-success" href="#/pages" ng-click="slidePage()">Pages</a> </p> <div id="relativeContainer"> <div id="content" ng-view=""></div> </div> </div> </div> 

CSS

 #wrapper { text-align:center; padding:30px 0; } #relativeContainer { text-align:left; position: relative; width: 500px; height: 800px; min-height: 800px; margin: 0 auto; overflow: hidden; } #content { position: absolute; top: 0; left: 0; } 

JS:

 var myApp = angular.module('myApp', []); myApp.directive('pageAnimate', function() { return { restrict: 'A', scope: { }, link: function (scope, elem, attrs) { scope.slidePage = function() { var thisContainer = $('#content'); var thisHeight = thisContainer.outerHeight(); thisContainer.animate({ top : '-' + thisHeight + 'px'}, { duration : 300, complete : function() { thisContainer.css({ top : '-999999em' }); var thisNewHeight = thisContainer.outerHeight(); $('#relativeContainer').animate({ height : thisNewHeight + 'px' }, { duration : 200, complete : function() { thisContainer.css({ top : '-' + thisNewHeight + 'px' }).animate({ top : 0 }, { duration : 300 }); }}); }}); }; } } }); myApp.config(function($routeProvider) { $routeProvider .when('/', { controller: 'HomeController', template: '<h1>{{ heading }}</h1><p>{{ content }}</p>' } ) .when('/users', { controller: 'UserController', template: '<h1>{{ heading }}</h1><p>{{ content }}</p>' } ) .when('/pages', { controller: 'PageController', template: '<h1>{{ heading }}</h1><p>{{ content }}</p>' } ) .otherwise( { redirectTo: '/' } ) }); myApp.controller('HomeController', function($scope) { $scope.heading = 'Home page'; $scope.content = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate'; }); myApp.controller('UserController', function($scope) { $scope.heading = 'Users'; $scope.content = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'; }); myApp.controller('PageController', function($scope) { $scope.heading = 'Pages'; $scope.content = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'; }); 

Answer 1

First of all, some minimal changes to get what you have. You need to prohibit the default movement of the default event (why it changes before the navigation is completed), and you need to perform manual navigation after the completion of the first animation. Thus, one way is to pass the event and URL to slidePage :

 <div id="wrapper" ng-app="myApp"> <div page-animate> <p> <a class="btn btn-primary" ng-click="slidePage($event, '/')">Home</a> <a class="btn btn-info" ng-click="slidePage($event, '/users')">Users</a> <a class="btn btn-success" ng-click="slidePage($event, '#/pages')">Pages</a> </p> <div id="relativeContainer"> <div id="content" ng-view=""></div> </div> </div> </div> 

and slidePage itself becomes:

  scope.slidePage = function(event, url) { event.preventDefault(); event.stopPropagation(); var thisContainer = $('#content'); var thisHeight = thisContainer.outerHeight(); thisContainer.animate({ top : '-' + thisHeight + 'px'}, { duration : 300, complete : function() { thisContainer.css({ top : '-999999em' }); $location.url(url); scope.$apply(); var thisNewHeight = thisContainer.outerHeight(); $('#relativeContainer').animate({ height : thisNewHeight + 'px' }, { duration : 200, complete : function() { thisContainer.css({ top : '-' + thisNewHeight + 'px' }).animate({ top : 0 }, { duration : 300 }); }}); }}); 

This code should work the way you want, but I don't think that it fully follows the angular philosophy.

Instead, I think you should add the slidePage directive slidePage that the links are <a href='#/pages' slide-page> . This directive has access to attributes (so that it can pick up href) and can bind the click handler directly to the binding element. I will also remove the hard wiring of the #content element by marking the element to be animated with a different directive. However, the same basic principle applies: stop distributing the event, perform the first animation, and then update the location to complete the second animation.