Question

我想在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 TO CODE

Answer 1

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

请尝试在Ionic ready听众中引导您的应用程序。

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

然后，为您的Javascript文件添加Ionic ready事件监听器：

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

此代码在加载AngularJS应用程序之前等待Ionic完全加载。

$ ionicScrollDelegate.getScrollPosition不起作用

1 个答案: