滚动事件的结束angularjs ionic(一旦滚动停止)

时间:2015-10-20 12:31:18

标签: javascript css angularjs ionic

我无法结束滚动事件angularjs,离子和最糟糕的部分是,它在浏览器中工作正常,但在Android和iOS设备中没有。

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

HTML:

 <ion-content overflow-scroll="true" has-bouncing='false'>
 <ion-list>      
       <div class="card" collection-repeat="product in products" scroll="atNewProduct($index)" scroll-item="atNewProduct($index)" scrollable>

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

         </div>

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

JS:

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

starter.directive('scroll', function ($parse, $document, $window) {
var _ = $window._;
var verge = $window.verge;
var visibleElements = [];
// alert(JSON.stringify(verge) + '\n' + _ + '\n' + visibleElements[0]);
return {
    restrict: 'A',
    priority: -1,
    scope: {
        scroll: '&',
        scrollItem: '='
    },
    link: function (scope, element, attrs) {

        var debounced = _.debounce(function() {

            // You might need a different test,
            // perhaps including the height of the element,
            // or using verge "rectangle" function
            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);
            }
        }, 1000);
        angular.element($document).on('scroll', debounced);
        if (verge.inViewport(element)) {
            visibleElements.push(element);
        }

    }
};
});

 starter.directive('scrollable', ['$document', '$window', function ($document, $window ) { 
return {
link: function (scope, element, attrs) {
    angular.element($document).bind('scroll', function() { //i guess the problem is with this line
        console.log("scrollable-------------");
        // detect if scroll has stop and execute a function  
        clearTimeout( $.data( this, "scrollCheck" ) );
            $.data( this, "scrollCheck", setTimeout(function() {
                alert("Stopped");
            }, 250) );   
    });
}
};
}])

starter.controller('plpCntrl',function($scope) {
  $scope.atNewProduct = function(item) {
  console.log(item);//able to get the index of ng-repeater present in the screen
}
 });

atNewProduct函数多次执行,直到滚动完成。任何人都可以建议我如何结束滚动事件并获取屏幕上特定项目的索引。

以及更多我收到一条错误消息,提示touch.webkitRaidusX已被弃用,将于2015年11月左右在M47中删除。

0 个答案:

没有答案