Question

<ul>
  <li></li>
  <li></li>
</ul>

当我滚动到页面底部时，我希望页面加载<li>info</li>。

$window.onscroll = function($event){
                     if($window.pageYOffset > [the parent element height]){
                       //TODO
                     }
                   };

那么如何使用angular获取父元素高度？我尝试访问https://docs.angularjs.org/api/ng/service/ $窗口来查找相关的api，但是这个页面没有列出$ window的attr，顺便说一句，我怎样才能获得$ window的所有attrs。

Answer 1

试试这个

$document.on('scroll', function() {
    // do your things
    console.log($window.scrollY);

    // or pass this to the scope
    $scope.$apply(function() {
        $scope.pixelsScrolled = $window.scrollY;
    })
});

我认为管理指令的最佳方法

app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {

        angular.element($window).bind("scroll", function() {
            if (this.pageYOffset >= 100) {
                 scope.boolChangeClass = true;
                 console.log('Scrolled below header.');
             } else {
                 scope.boolChangeClass = false;
                 console.log('Header is in view.');
             }
            scope.$apply();
        });
    };
});

使用onscroll事件更新列表

1 个答案: