CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
Aishwat Singh
Aishwat Singh

Reputation: 4459

Getting the index of ng-repeat after scroll in controller - angular , Ionic

The below code works fine in browser but when I do the same in mobile its not working,

Here is my codepen link, http://codepen.io/sudan_1993/pen/BowzbN

HTML file

<html ng-app="bumbleBee">
<head>
<script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js">   </script>
</script>
<script src="http://airve.github.io/js/verge/verge.min.js"></script>
<script     src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js">  </script>
</head>
<body>
<ion-view>
  <ion-content overflow-scroll="true">
<div ng-controller="repeatCtrl">
  <h1 ng-bind="title"></h1>
  <!--if you want search in all data use searching.$ -->
        <input type="text" placeholder="search All Data" ng-model="searching.$" /> OR
        <!-- Searching by Name -->
  <input type="text" placeholder="search by Name" ng-model="searching.name" /> OR
              <!-- Searching by Age -->
  <input type="text" placeholder="search by Age" ng-model="searching.age" />
  <ul>  
    <li scroll="atNewArticle($index)" scroll-item="cat" ng-repeat="cat in cats | filter:searching">{{cat.name +"  - " + cat.age+ " - "+ cat.gender}}</li>  
  </ul>
</div>
</ion-view>
  </ion-content>
  </body>
</html>

Controller:

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

myApp.directive('scroll', function ($parse, $document, $window) {
console.log("inside scroll");
var _ = $window._;
var verge = $window.verge;
var visibleElements = [];
    console.log(JSON.stringify(verge) + '\n' + _ + '\n' + visibleElements[0]);

return {
    restrict: 'A',
    scope: {
        scroll: '&',
        scrollItem: '='
    },
    link: function (scope, element, attrs) {
      console.log(_.debounce)
        var debounced = _.debounce(function() {
            // You might need a different test,
            // perhaps including the height of the element,
            // or using verge "rectangle" function
            console.log("came inside link");
            var visible = verge.inViewport(element);

            var index = visibleElements.indexOf(scope.scrollItem);
            var previouslyVisible = (index != -1);
            if (visible && !previouslyVisible) {
                visibleElements.push(scope.scrollItem);
                scope.$apply(function() {
                  scope.scroll({item:scope.scrollItem});
                });
            }
            if (!visible && previouslyVisible) 
            {
                 visibleElements.splice(index, 1);
            }
        }, 500);
        angular.element($document).on('scroll', debounced);
        if (verge.inViewport(element)) {
            visibleElements.push(element);
        }

    }
};
});

myApp.controller('repeatCtrl', ['$scope', function($scope){

//Creating Angular Project Title
$scope.title = "Title";

//Initilal JSON Object
$scope.cats= [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
];

$scope.atNewArticle = function(item) {
  console.log(item);
}



}])

It is not going inside the link in directive.Is there any problem with the _.debounce? Can anyone help on this issue?

Upvotes: 0

Views: 1194

Answers (2)

sudarshan
sudarshan

Reputation: 126

Instead of using ng-repeat use collection-repeat..its working fine

Here is my working snippet...

<ion-content overflow-scroll="false">
 <ion-list>

       <div class="card" collection-repeat="product in products" scroll="atNewArticle($index)" scroll-item="atNewArticle($index)"  id='product_list'>

        <div class='row'>
          <div class="col col-25">
            <img ng-src={{product.ImagePath}} style="width:70px;height:70px"></img>
          </div>


        </div>
    </ion-list>
</ion-content>

Upvotes: 1

Josh Lin
Josh Lin

Reputation: 2437

maybe priority works here, if scroll compiles first and repeat works after, try priority: -1

return {
  restrict: 'A',
  priority: -1,
  scope: {
    scroll: '&',
    scrollItem: '='
  },
or directive inside ng-repeat

<li ng - repeat="">
  <div iscroll>
  </div>
</li>

Upvotes: 0

Related Questions