Waypoints.js 未按预期处理 angular 次观看

Question

我试图在 [=29= 的帮助下，在视图中的某些元素到达 window 顶部（偏移 70%）时将一些 css 动画应用到它们]waypoints.js.

我创建了如下所示的指令。

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: '/'
      });
  });

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

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

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

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

Answer 1

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

添加了一个 $viewContentLoaded 事件侦听器（在父控制器中）以在视图更改时调用该方法。

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

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

希望这对其他人有帮助。

Waypoints.js 未按预期处理 angular 次观看

Waypoints.js not working as expected with angular views

javascript

jquery

css-animations

jquery-waypoints

angularjs