javascript - Waypoints.js 无法按预期使用 Angular View

Question

当我的 View 中的某些元素到达窗口顶部(偏移 70%)时，我尝试在 waypoints.js 的帮助下对它们应用一些 css 动画。

我创建了一个指令，如下所示。

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%',

                })



            }
        }
    })

下面是我的app.js文件

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

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

这两个 View 都包含使用 cl-waypoints="{animation:'fadeInUp'}" 指令的元素。

当应用程序加载到浏览器上时，动画按预期工作，但是当我导航到另一个 View 并开始向下滚动时，该 View 中的元素没有动画。无论如何，如果我刷新页面，它就可以正常工作。

看起来需要刷新页面才能让 waypoint.js 发挥其魔力。如果有解决此问题的方法，请告诉我。

非常感谢任何帮助。谢谢。

Answer 1

能够找到解决此问题的方法。 Waypoint 要求我们在每次更改 DOM 时调用一个函数 (Waypoint.refreshAll())，在我们的例子中更改 View 内容。

添加了一个 $viewContentLoaded 事件监听器(在父 Controller 中)，以便在 View 更改时调用该方法。

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

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

希望这对其他人有帮助。