如何在滚动到 Angular 中的特定点时触发功能？

Question

我不是在寻找 ngInfiniteScroll 解决方案（我不想使用 jQuery）。

我的页面分为三个部分

<section id="A" ng-init="initA()">
 <!-- Content A -->
</section>

<section id="B" ng-init="initB()">
 <!-- Content B -->
</section>

<section id="C" ng-init="initC()">
 <!-- Content C -->
</section>

如何在用户向下滚动到相关部分时触发功能 initA(), init(B), init(C)？也就是说，在页面加载时，不会加载任何内容。但是一旦用户开始向下滚动，就会触发 initX()?

Answer 1

您可以为此编写一个指令。看到这个fiddle：http://jsfiddle.net/6683ppmx/1/

var myApp = angular.module('myApp',[]);

myApp.directive('dSec', function($window) {
  return {
    link: function(scope, elm, attr, ctrl) {
        scope.initialScroll[attr.id] = elm.prop('offsetTop');
        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset >= scope.initialScroll[attr.id]
                    && !scope.hitScroll[attr.id]) {
                 console.log("Scroll to --> ", attr.id);
                 scope.hitScroll[attr.id] = true;
             }
        });
    }
  };
});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.initialScroll = {};
    $scope.hitScroll = {};
}

如何在滚动到 Angular 中的特定点时触发功能？

How to trigger a function when scrolled to a specific point in Angular?

javascript

infinite-scroll

angularjs