我试图借助waypoints.js将一些CSS动画应用于视图中的某些元素,使其到达窗口顶部(偏移70%)。

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

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发挥作用。请让我知道是否有解决此问题的方法。

将不胜感激。
谢谢。

最佳答案

能够找到解决该问题的方法。 Waypoint要求我们每次对DOM进行更改时都调用一个函数(Waypoint.refreshAll()),在本例中为更改视图内容。

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

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

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


希望这对其他人有帮助。

09-10 11:39
查看更多