AngularJS：隐藏在滚动元件与$动画

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

我已经都在日志中在某些时候

加上“这是炒鱿鱼”的消息，我有以下动画服务：

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没有得到后“$ animate.addClass新类（元，“褪色”）'被解雇

我失踪了什么？

Answer 1

当通过例如addEventListener()或jqLit​​e/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