javascript - 如何在 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 = {};
}