AngularJS显示元素onScroll函数

Question

这是我们的javascript：

window.onscroll=function(){scrollShow()};
    function scrollShow(){
        if (document.documentElement.scrollTop>150){
            document.getElementById("myBtn").style.display="block";
        } else {
            document.getElementById("myBtn").style.display="none";
        }
    }

如何在AngularJS中创建相同的功能？

Answer 1

您可以通过创建指令

来完成此操作

<button id='myBtn' scroll-show></div>

app.directive('scrollShow', [function() {
  return {
    link: function (scope, elem, attrs) {
      elem.on('scroll', function (e) {
        if(....) {
            element.hide();
        } else {
            element.show();
        }
      });
    })
  }
}]);

Answer 2

我认为最好的方法是创建一个指令。您可以将created指令附加到html标记/组件/指令，并将事件监听器附加到窗口。你可以尝试这种方法。

angular.module('myModule', [])

.directive('myScrollShowDirective', ['$window', function($window) {

  function link(scope, element, attrs) {
    var format,
        timeoutId;
    // or attach event in jquery style    
    $window.addEventListener('scroll', scrollShow);


    function scrollShow(){
        if ($window.document.documentElement.scrollTop>150){
            element.style.display="block";
        } else {
            element.style.display="none";
        }
    }

    element.on('$destroy', function() {
      $window.removeEventListener('scroll', scrollShow);
    });

  }

  return {
    link: link
  };
}]);