Waypoints.js not working as expected with angular views

Question

I am trying to apply some css animation to some of the elements in my views when they reach the top of the window (offset 70%) with the help of waypoints.js.

I've created a directive as shown below.

angular.module("myApp")
    .directive("clWaypoints",function(){
        return{
            restrict:"A",
            link: function(scope,element,attrs)
            {
                var wayp=new Waypoint({
                    element:element,
                    handler:function(direction){

                        if(direction=="down")
                        {
                            var animation = scope.$eval(attrs.clWaypoints).animation;
                            element.css('opacity', '1');
                            element.addClass("animated " + animation);

                        }
                    },
                    offset:'70%',

                })



            }
        }
    })

Below is my app.js file

angular
  .module('myApp', [
    'ngRoute',
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html',
          controller: "mainCtrl"
      })
        .when('/about', {
            templateUrl: 'views/about.html'
        })

      .otherwise({
        redirectTo: '/'
      });
  });

Both the views contain elements which use the cl-waypoints="{animation:'fadeInUp'}" directive.

When the app is loaded on a browser, the animations work as expected, but when I navigate to another view and begin to scroll down the elements in that view are not animated. Anyhow if I refresh the page, it works just fine.

Looks like the page needs to be refreshed for waypoint.js to do its magic. Please let me know if there is a solution to this problem.

Would appreciate any help. Thanks.

Sanu Soman Sanu Soman · Accepted Answer · 2015-12-19T09:07:03

Was able to find a solution to this problem. Waypoint requires us to call a function (Waypoint.refreshAll()) every time we make changes to the DOM, in our case changing the view content.

Added an $viewContentLoaded event listener (in the parent controller) to call the method whenever the view changes.

$scope.$on('$viewContentLoaded', function(event){

          $timeout(function() {
              Waypoint.refreshAll()
          },0);
      });

Hope this helps others.

Waypoints.js not working as expected with angular views

1 Answers