2

我正在将我的 jQuery 应用程序迁移到 AngularJS。

我需要做的是在发生滚动时更改数据数组，我该怎么做？

我在 plunk 有 jQuery 的这段代码： http ://plnkr.co/edit/jdwxH5pmyecuWTsrutrO?p=preview

当您滚动 div 时，会显示一个带有可见元素索引的列表。

我想要做的是ng-check-visibility在 ng-repeat 元素处设置指令或过滤器（），例如：

<div ng-repeat="item in data" ng-check-visibility>
    {{item.name}}
</div>

并且该指令在元素可见时更改item设置值，否则将其设置为 false。item.visible=true

我可以用 Angular 做到这一点吗？有任何想法吗？

4

1 回答 1

4

这是一种将其作为指令的方法：

  var app = angular.module('myapp', []);
  app.controller('MainCtrl', function($scope) {

    arr = [];
    for(var i=0; i<500; i++){
      arr.push({id: i, name: 'name'+i});          
    }
    $scope.data = {
      items: arr,
      visible: []
    };
  });

  app.directive('checkVisibility', function() {
    return {
      scope: {
        data: '=checkVisibility'
      },
      link: function(scope, el, attrs) {
        el.scroll( function() {
          var reference_top = el.offset().top;
          var reference_height = el.height();

          var $elements = el.find('.check');

          scope.data.visible = [];
          for(var i=0; i<$elements.length; i++){
            var $element = $($elements[i]);
            var element_top = $element.offset().top;
            var element_height = $element.height();

            if (reference_top < element_top + element_height &&
                reference_top + reference_height > element_top) {
                scope.data.visible.push( i );
            }
          }
          scope.$apply();
        });
      }
    };
  });

--

<body  ng-controller="MainCtrl">
  <div class="outer-panel" check-visibility="data">
    <div class="inner-panel">
      <div ng-repeat="item in data.items" class="check">
        {{item.name}}
      </div>
    </div>
  </div>
  <div id="visibles">
    {{data.visible}}
  </div>
</body>

plunkr

于 2013-05-14T20:00:19.023 回答