JSFiddle - React, Tailwind, and code Playground

conditional ng-repeat with directive scroll loading

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div ng-controller="MyCtrl">

  <ul class="items-wrap" scrolly>

    <div class="row">
      <hr>
    </div>
    <h2>
    TEST  
    </h2>
    <div class="row">
      <hr>
    </div>
    <div class="item animated fadeInRight" ng-repeat="item in items | limitTo:loadNum" ng-class="{'bg-info col-xs-8': !($index % 3), 'bg-danger  col-xs-4': ($index % 3)}" style="background-image:url('https://i.imgur.com/ktrgKOg.png');background-repeat:no-repeat;background-size:cover">
      {{item}}
    </div>
    <div class="row clearifx"></div>

  </ul>
</div>

CSS

.items-wrap {
   height: 98vh;
   border: 12px solid #eeeffe;
   overflow-y: auto
 }
 
 .col-xs-8,
 .col-xs-4 {
   border: 1px solid #ffffff;
   padding: 10px text-align: center;
 }
 
 div.wrap {
   clear: both;
 }
 
 .col-xs-8 {
   height: 300px
 }
 
 .col-xs-4 {
   height: 150px
 }

JavaScript

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

//myApp.directive('myDirective', function() {});


myApp.directive('scrolly', function($window, $document) {
  return function(scope, element, attrs) {
    var w = element[0];
    angular.element(w).bind('scroll', function() {
      console.log(".. running: " + (w.scrollTop + ":" + w.offsetHeight + ":" + w.scrollHeight) + "-->>>>>--" + (w.scrollTop + w.offsetHeight >= w.scrollHeight))
      scope.$apply(function() {
        if (w.scrollTop + w.offsetHeight >= w.scrollHeight) {
          //  scope.limitNum = scope.limitNum += 3;
          console.log("adding products to screen")
          scope.showMore()
        }
      });
    });
  }
});

/*
myApp.directive('scrollyWINDOW', function($document,$window) {

  return {
    restrict: 'AE',
    link: function(scope, element, attrs) {
 
      var doc = angular.element($document)[0].body;
      var raw = element[0];
      var elemH = doc.scrollHeight;
       var objectH = element[0].scrollHeight;
      $document.bind("scroll", function() {
      if( objectH > 1300){ console.log("DIRECTIVE DONE" + viewportHeight); return}
      console.log((doc.scrollTop + doc.offsetHeight)/8 + "-----"+element[0].offsetHeight + "__" + doc.offsetHeight + "__>=__" + window.pageYOffset + "--" + elemH)
        if ((doc.scrollTop + doc.offsetHeight) >= doc.scrollHeight) {
          //run the event that was passed through
          scope.$apply(scope.showMore());
        }
      });
    }
  };
});
*/
/*
myApp.directive('scrolly2', function($window) {
  return function(scope, element, attributes) {
    angular.element($window).bind('scroll', function() {
      var body = document.body,
        html = document.documentElement;
      var docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

      setTimeout(function() {
        console.log(element[0].offsetHeight + " height of objects");
        console.log(window.pageYOffset + " scrolling...