在控制器- angular, Ionic中获取滚动后的ng-repeat索引

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

本文关键字：滚动 ng-repeat 索引 获取 控制器 angular Ionic      更新时间：2023-09-26

下面的代码在浏览器中工作正常，但当我在移动端做同样的事情时，它不起作用，

这是我的codepen链接，http://codepen.io/sudan_1993/pen/BowzbN

HTML文件

<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>

控制器:

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);
}

}])

它不在link in指令中。这台设备有什么问题吗?有人能在这个问题上提供帮助吗?

使用collection-repeat代替ng-repeat。

这是我的工作片段…

<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>

也许优先级工作在这里，如果滚动先编译和重复工作后，尝试priority: -1 

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

中的指令

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

相关文章：