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");
            }
        });
    };
});

我有两个＆＃34;这是被解雇的＆＃34;某些时候日志中的消息

另外，我有以下动画服务：

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});
        }
    };
});

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

这是元素：

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

编辑：我可以在chrome的元素检查器中看到div在＆an; $ animate.addClass（元素，＆＃34; fade＆＃34;）之后没有获得新类＃39;被解雇了

我错过了什么？

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隐藏滚动元素

1 个答案: