滚动事件AngularJS后在控制器中执行功能

Question

假设我有一个堆叠的文章:

<div ng-repeat="article in articles">
  <h1> {{article.title}} </h1>
  <p> {{article.body}} </p>
</div>

滚动浏览每篇文章时:

<div scroll="atNewArticle(article)" ng-repeat="article in articles">
  ...
</div>

我想执行一个函数:

.controller('AppCtrl', ['$scope', function($scope) {
  $scope.atNewArticle = function(){
    console.log(article);
  }
}])

我很难找到正确的方法,因为我不确定是否应该将滚动事件绑定到窗口或检测指令元素本身的偏移量.

这是我到目前为止所尝试的:http: //jsfiddle.net/6VFJs/1/

Answer 1

有一些事情可能是一个好主意(取决于您的确切用例).首先,一些非Angular特定的:

• 对scroll事件使用"debounced"版本的侦听器,以便该函数仅在用户停止滚动后才执行.您可以使用lodash/underscore库.

  var debounced = _.debounce(function() { .... }, 500); // Executes 500ms after last call of the debounced function.
  angular.element($document).on('scroll', debounced);
  

• 使用库来确定任何元素的位置/可见性.verge.js是我发现的一个小型轻量级库.使用它的一种方法是:

  var visible = verge.inViewport(element);
  

  但是,根据您想要将其视为"可见"的内容,您可能需要更改此设置.

• 跟踪每个事件中可见/不可见的内容(因为您有"atNewArticle"功能,这表示您只希望在项目进入视图时调用它).因此,您需要创建一个可见元素数组,并在滚动时对其进行测试.

  var index = visibleElements.indexOf(scope.scrollItem);
  

Angular特定点:

• 将2个选项传递给指令.1)新项目进入视图时的回调函数,以及2)文章项目本身,因此可以将其传递回回调.

  scope: {
       scroll: '&',
       scrollItem: '='
  }
  

  这些可以用作:

  <div ng-repeat="article in articles" class="block" scroll="atNewArticle(item)" scroll-item="article">
  

  这为指令的范围提供了变量scrollItem和函数scroll.所以指令可以在适当的时候调用:

  scope.scroll({item:scope.scrollItem});
  

  你应该注意这个的语法:它是一个关键对象映射.

你可以在http://jsfiddle.net/Pb8t4/4/看到这一切

编辑:更新了包含调用的jsfiddle的链接,scope.$apply以便Angular正确注意到任何更改.

Answer 2

你可以找到this有用的例子.

想法是使用:滚动绑定与if过滤scope.$apply(attrs.scroll);调用的语句