1
Я пытаюсь получить положение элемента в Scroll. Но когда я использую функцию прокрутки, она дает ошибку, что $ ionicScrollDelegate.getScrollPosition не является функцией.
Мой HTML код это-
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">{{myTitle}}</h1>
</ion-header-bar>
<ion-content padding="true">
<div class="row">
<div class="col"><h2>Swipe : {{data.swipe}}</h2></div>
<div class="col"><h2>Swipe Right : {{data.swiperight}}</h2></div>
<div class="col"><h2>Swipe Left : {{data.swipeleft}}</h2></div>
<div class="col"><h2>DoubleTap : {{data.doubletap}}</h2></div>
<div class="col"><h2>Tap : {{data.tap}}</h2></div>
<div class="col"><h2>Scroll : {{data.scroll}}</h2></div>
</div>
<div class="row">
<div detect-gestures gesture-type="swipe" class="col swipe-box">
<p>
Swipe Left Or Right Direction Inside Me!
</p>
</div>
<div detect-gestures gesture-type="swiperight" class="col swipe-box">
<p>
Swipe Right Inside Me!
</p>
</div>
<div detect-gestures gesture-type="swipeleft" class="col swipe-box">
<p>
Swipe Left Inside Me!
</p>
</div>
<div detect-gestures gesture-type="doubletap" class="col swipe-box">
<p>
Double Tap Me
</p>
</div>
<div detect-gestures gesture-type="tap" class="col swipe-box">
<p>
Tap Me
</p>
</div>
<div detect-gestures gesture-type="scroll" class="col swipe-box">
<ion-scroll direction="y" on-scroll="getScrollPosition();">
<p>
Scroll Me
</p>
</ion-scroll>
</div>
</div>
</ion-content>
</body>
</html>
Js code-
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $timeout,$ionicScrollDelegate) {
$scope.myTitle = 'Template';
$scope.data = {
swipe : 0,
swiperight: 0,
swipeleft: 0,
tap : 0,
doubletap : 0,
scroll : 0
};
$scope.reportEvent = function(event) {
console.log('Reporting : ' + event.type);
$timeout(function() {
$scope.data[event.type]++;
})
}
$scope.getScrollPosition = function() {
$timeout(function() {
$scope.data1 = $ionicScrollDelegate.getScrollPosition().top;
});
console.log($scope.data1);
};
})
.directive('detectGestures', function($ionicGesture) {
return {
restrict : 'A',
link : function(scope, elem, attrs) {
var gestureType = attrs.gestureType;
switch(gestureType) {
case 'swipe':
$ionicGesture.on('swipe', scope.reportEvent, elem);
break;
case 'swiperight':
$ionicGesture.on('swiperight', scope.reportEvent, elem);
break;
case 'swipeleft':
$ionicGesture.on('swipeleft', scope.reportEvent, elem);
break;
case 'doubletap':
$ionicGesture.on('doubletap', scope.reportEvent, elem);
break;
case 'tap':
$ionicGesture.on('tap', scope.reportEvent, elem);
break;
case 'scroll':
$ionicGesture.on('scroll', scope.reportEvent, elem);
break;
}
}
}
})
Пожалуйста, проверьте ошибку.
Вот codepen ссылка- LINK TO CODE