AngularJS : Directive : Animate sliding pages and postpone controller binding

Question

I'm trying to figure out how to postpone the default controller binding and only apply it from within the directive, once the specific animation (custom - not the angularjs one) has been performed on the DOM element with the content. The fiddle to what I'm trying to accomplish is here, although it does replace the content right away - before the sliding animation has completed: http://jsfiddle.net/scabro/hHy7s/27/

I need to be able to postpone the $scope binding until the page container has completed sliding / animated up, then replace the content with the data from within the controller and once this has been done, slide back down.

Here's what I currently 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.';

});

Have you considered to use http://yearofmoo-articles.github.io/angularjs-animation-article/app/#/ng-switch ? — zs2020, Aug 04 '13 at 15:47
I had a look at it, but again - same as built in AngularJS animations - it doesn't do quite what I want it to. Content rather than sliding away - is just disappearing etc. I've got pretty specific requirements and need to make sure it works that way. — Spencer Mark, Aug 05 '13 at 07:01

score 2 · Answer 1 · answered Aug 09 '13 at 09:34

First of all, some minimal changes to get what you have working. You need to prevent the default event from navigating the page (that's why it changes before the navigation completes), and you need to do the navigation manually after the first animation has finished. So one way is to pass the event and url into 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 });

                }});

            }});

That code should work as you want, but I don't think it quite follows the angular philosophy.

Instead what I think you should do is add a slidePage directive directly so the links are <a href='#/pages' slide-page>. That directive has access to the attributes (so it can pick up the href), and can bind a click handler directly onto the anchor element. I would also remove the hard-wiring of the #content element by tagging the element to be animated with another directive. However the same basic principle applies: stop the event propagating, do the first animation and then update the location before doing the second animation.

Thanks Duncan - that sure helps, although I would still use the href attribute on the link to make sure that all incompatible browsers as well as SEO works as expected. One thing - would it be possible to simply bind the method without using the ng-click on each link - simply bind it to all 'a' tags on click? something like $('a').click(function() { }); but in the proper angularjs way? — Spencer Mark, Aug 12 '13 at 18:24
@SpencerMark you can you use `.bind('click',function(){})` with the `angular.element` using the elem parameter `find` a tags reference from [**here**](http://docs.angularjs.org/api/angular.element) — David Chase, Aug 15 '13 at 14:08
@DavidChase - but that's simply jQuery - isn't there any way of targeting all tags using purely angularjs directive? — Spencer Mark, Aug 16 '13 at 10:43
@SpencerMark thats angular's jqlite (built-in) and you are using element parameter of the linking function in the directive, other than applying like you mentioned `ng-click` i dont know how else you would accomplish this task. — David Chase, Aug 16 '13 at 11:22

AngularJS : Directive : Animate sliding pages and postpone controller binding

1 Answers1