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

    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- LINK TO CODE

4

1 回答 1

0

我怀疑你$IonicScrollDelegate的代码还不可用，因为在你的代码执行时 Ionic 还没有完全加载。

请尝试在 Ionic 就绪的侦听器中引导您的应用程序。

为此，请ng-app从标签中删除该部分<html>以阻止 Angular 自动引导。

然后，将 Ionic 就绪事件侦听器添加到您的 Javascript 文件：

 window.ionic.Platform.ready(function () {
     angular.bootstrap(document, ['ionicApp']);
});

此代码等待 Ionic 完全加载，然后再加载您的 AngularJS 应用程序。

于 2015-10-21T13:43:59.460 回答