只有在页面未加载完毕时才会触发JavaScript路点

Question

我第一次使用JavaScript Waypoints（没有框架）。

我有一个非路点元素在加载延迟2秒后淡入页面。

当你向下滚动时，我的第一个航路点会触发console.log，但只有当我向下滚动到它时，当第一个延迟的项目仍在淡入时，它所附加的图像才会淡入，但如果第一个项目在我向下滚动之前完成了淡入，则该航路点会被触发，但它附加的图像不会出现。

我正在用一个ng秀来展示这张照片。

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">

这是问题的gif图：

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

这可能与航路点功能没有触发摘要周期有关吗？

Answer 1

想明白了！

航路点功能没有触发摘要周期，即使它被添加到观察列表中。

在重置$scope.radarImage变量后，我在函数中添加了$scope.$apply，它立即根据需要运行！

现在的功能看起来像：

$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%'
  })