JavaScript waypoints only trigger if the page is not done loading?

Question

I'm using JavaScript Waypoints for the first time (no-framework).

I have a non-waypoints element fade onto the page after a 2 second delay on load.

As you scroll down, my first waypoint triggers a console.log, but the image it is attached to only fades in if I scroll down to it while the first delayed item is still fading in, but if the first item completes its fade in before I scroll down, the waypoint triggers but the image it is attached to does not appear.

I'm using an ng-show to reveal the image.

JS:

$scope.radarImage = false;

var waypoint = new Waypoint({
    element: document.getElementById('radarImageTrigger'),
    handler: function(direction) {
      console.log('Radar hit:', direction);
      if (direction === 'down') {
        $scope.radarImage = true;
        console.log($scope.radarImage);
      }
    },
    offset: '80%'
  })

HTML:

<img ng-show="radarImage" id="radarImg" class="animated fadeInLeft" src="./public/images/radar.gif" alt="Radar">

Here is a gif of the problem:

https://drive.google.com/file/d/0B5UbHNPxudsYTXVmVUVTQ1NvaWs/view?usp=sharing

Does it potentially have to do with the waypoint function not triggering the digest cycle?

Charles Watson Charles Watson · Accepted Answer · 2015-12-12T06:49:54

Figured it out!

The waypoint function wasn't triggering the digest cycle even though it was added to the watchlist.

I added $scope.$apply inside the function after resetting the $scope.radarImage variable and it immediately opperated as desired!

The function now looks like:

$scope.radarImage = false;

var waypoint = new Waypoint({
    element: document.getElementById('radarImageTrigger'),
    handler: function(direction) {
      console.log('Radar hit:', direction);
      if (direction === 'down') {
        $scope.radarImage = true;
        **$scope.$apply();**
        console.log($scope.radarImage);
      }
    },
    offset: '80%'
  })

JavaScript waypoints only trigger if the page is not done loading?

1 Answers