AngularJS: 使用 $animate 在滚动时隐藏元素

Question

我有以下指令：

angular.module('mymod').directive("hideOnScroll", function($animate, $document) {
    return function(scope, element, attrs) {
        $document.bind('scroll', function () {
            if ($document.scrollTop() > 80) {
                console.log("this is fired1")
                $animate.addClass(element, "fade");
            } else {
                console.log("this is fired2")
                $animate.removeClass(element, "fade");
            }
        });
    };
});

我在某个时候在日志中有两条 "this is fired" 条消息

此外，我还有以下动画服务：

angular.module('mymod').animation(".fade", function() {
    console.log("this is never fired3")

    return {
        addClass: function(element, className) {
            console.log("this is never fired4")
            //TweenMax.to(element, 1, {opacity: 0});
        },
        removeClass: function(element, className) {
            console.log("this is never fired5")
            //TweenMax.to(element, 1, {opacity: 1});
        }
    };
});

None 的控制台消息被触发。完全没有（3、4 和 5）。我检查了它是否已添加到浏览器中，是的。我有 ngAnimate 作为依赖

这是元素：

<div hide-on-scroll>Hello</div>

编辑：我可以在 chrome 的元素检查器中看到 div 在 '$animate.addClass(element, "fade")' 被解雇

我错过了什么？

Answer 1

当通过例如 addEventListener() 或 jqLite/jQuery 方法 on 和 bind 手动附加的事件处理程序执行时，您需要手动触发摘要循环以让 Angular 知道有些事情发生了变化。

您可以使用 $apply（例如 ng-click 在内部使用）：

$document.bind('scroll', function() {
  scope.$apply(function() {
    if ($document.scrollTop() > 80) {
      console.log("this is fired1");
      $animate.addClass(element, "fade");
    } else {
      console.log("this is fired2");
      $animate.removeClass(element, "fade");
    }
  });
});

另请注意，当您将事件侦听器附加到文档时，您应该在范围被销毁时手动删除它们：

var onScroll = function() {
  scope.$apply(function() {
    if ($document.scrollTop() > 80) {
      console.log("this is fired1");
      $animate.addClass(element, "fade");
    } else {
      console.log("this is fired2");
      $animate.removeClass(element, "fade");
    }
  });
};

$document.bind('scroll', onScroll);

scope.$on('$destroy', function() {
  $document.unbind('scroll', onScroll);
});

演示： http://plnkr.co/edit/wl0vujSnBcb24FHGQ4il?p=preview

AngularJS: 使用 $animate 在滚动时隐藏元素

AngularJS: Hide element on scroll with $animate

javascript

angularjs

animation

directive