My directive for infinite scroll

infinitescroll.js

app.directive('infiniteScroll', [
  '$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout) {
    return {
      link: function(scope, elem, attrs) {
        var checkWhenEnabled, handler, scrollDistance, scrollEnabled;
        $window = angular.element($window);
        elem.css('overflow-y', 'scroll');
        elem.css('overflow-x', 'hidden');
        elem.css('height', 'inherit');
        scrollDistance = 0;
        if (attrs.infiniteScrollDistance != null) {
          scope.$watch(attrs.infiniteScrollDistance, function(value) {
            return scrollDistance = parseInt(value, 10);
          });
        }
        scrollEnabled = true;
        checkWhenEnabled = false;
        if (attrs.infiniteScrollDisabled != null) {
          scope.$watch(attrs.infiniteScrollDisabled, function(value) {
            scrollEnabled = !value;
            if (scrollEnabled && checkWhenEnabled) {
              checkWhenEnabled = false;
              return handler();
            }
          });
        }
        $rootScope.$on('refreshStart', function(event, parameters){
            elem.animate({ scrollTop: "0" });
        });
        handler = function() {
          var container, elementBottom, remaining, shouldScroll, containerBottom;
          container = $(elem.children()[0]);
          elementBottom = elem.offset().top + elem.height();
          containerBottom = container.offset().top + container.height();
          remaining = containerBottom - elementBottom ;
          shouldScroll = remaining <= elem.height() * scrollDistance;
          if (shouldScroll && scrollEnabled) {
            if ($rootScope.$$phase) {
              return scope.$eval(attrs.infiniteScroll);
            } else {
              return scope.$apply(attrs.infiniteScroll);
            }
          } else if (shouldScroll) {
            return checkWhenEnabled = true;
          }
        };
        elem.on('scroll', handler);
        scope.$on('$destroy', function() {
          return $window.off('scroll', handler);
        });
        return $timeout((function() {
          if (attrs.infiniteScrollImmediateCheck) {
            if (scope.$eval(attrs.infiniteScrollImmediateCheck)) {
              return handler();
            }
          } else {
            return handler();
          }
        }), 0);
      }
    };
  }
]);

markup.html

<div id="estates-listing"  extend-height>
  <div class="content" infinite-scroll="addMoreItems()" infinite-scroll-distance="2">
    <div class="content-wrapper">
      <div class="house"  ng-animate="'animate'" ng-class="{inactive: (selectedEstate != null || selectedEstate != undefined) && estate.id!=selectedEstate.id , active:(selectedEstate != null || selectedEstate != undefined) && estate.id==selectedEstate.id}" ng-repeat="estate in estates | orderBy: orderProp : orderReverse | limitTo: config.itemsDisplayedInList track by estate.id" ng-mouseover="highlightMarker(estate)" ng-mouseleave="leaveMarker(estate)" ng-click="showDetailview(estate.id)" >
        <div id="l-el{{estate.id}}">
        </div>
      </div>
    </div>
  </div>
</div>

The extend-heihgt directive sets a height on the element to stretch to display height 100%. Can share that as well if needed

Could you please share extend-height?

Could you please share extend-height?

please, share extend-height

+1

I have performance issue with ng-repeat.But I have used OnsenUI so instead of

, I have and
Can any one help me to deal with it?
thanks

Got error with below code.Please help
ons-list id="dashboardlist" infinite-scroll="addMoreItems()" infinite-scroll-distance="2"

ons-list-item modifier="tappable" ng-repeat="case in filtered = (cases | filter: search | orderBy:predicate:reverse | orderEmpty:predicate:'toBottom'|limitTo: data)"

$scope.data = 5;

    $scope.addMoreItems = function () {
        $scope.data += 5;
    };

error
TypeError: Object [object Object] has no method 'offset'
at link.handler (file:///android_asset/www/app/shared/directive.js:47:40)
at file:///android_asset/www/app/shared/directive.js:71:30
at file:///android_asset/www/assets/lib/angular_1.4.0-rc.2.js:17554:31
at completeOutstandingRequest (file:///android_asset/www/assets/lib/angular_1.4.0-rc.2.js:5353:10)

at file:///android_asset/www/assets/lib/angular_1.4.0-rc.2.js:5625:7

After debugging this,found problem with below line.
elementBottom = elem.offset().top + elem.height();

please help me to solve this

@sagargajera,

1. DOMElement which doesn't have the offset() method. You need to use a jQuery object:,
   like code above it,
   container = $(elem.children()[0]);

2. the addMoreItems(), which is handler(), is used with LimitTo, like this
   $scope.config = {};
   $scope.config.itemsDisplayedInList = 5;
   $scope.addMoreItems = function(){
   $scope.config.itemsDisplayedInList += 5;
   }
   so while scrolling, the list will be increasing automatically.

$rootScope.$on('refreshStart',xxxxxxxx) doesn't work,bro.I don't know what's this function means.........