javascript - Getting the index of ng-repeat after scroll in controller - angular , Ionic -
the below code works fine in browser when same in mobile not working,
here 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 want search in data use searching.$ --> <input type="text" placeholder="search data" ng-model="searching.$" /> or <!-- searching name --> <input type="text" placeholder="search name" ng-model="searching.name" /> or <!-- searching age --> <input type="text" placeholder="search 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() { // might need different test, // perhaps including height of 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 not going inside link in directive.is there problem _.debounce? can on issue?
instead of using ng-repeat use collection-repeat..its working fine
here 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> 
Comments
Post a Comment