1

我正在使用带有 agular js 和离子材料框架的离子。我使用 YouTube api 来获取 YouTube 频道供稿，但它的内容最初没有加载。当我向下滚动时，提要数据正在显示。

初始内容的图像链接未加载。 http://i.hizliresim.com/DR4ZPy.jpg

我向下滚动时的图像链接 http://i.hizliresim.com/7bMzNm.jpg

离子控制台记录错误。

TypeError: o[0] is undefined /lib/ionic-material/ionic.material.min.js, Line: 13

我的 HTML 文件“Gallery.Html”的代码片段

Galery CTRL
.controller('GalleryCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion, $http) {
  // Set Motion

  $scope.$parent.showHeader();
  $scope.$parent.clearFabs();
  $scope.isExpanded = false;
  $scope.$parent.setExpanded(false);
  $scope.$parent.setHeaderFab(false);


  $timeout(function() {
      ionicMaterialMotion.slideUp({
          selector: '.slide-up'
      });
  }, 300);

  $timeout(function() {
      ionicMaterialMotion.fadeSlideInRight({
          startVelocity: 3000
      });
  }, 700);

  

    // Activate ink for controller
    ionicMaterialInk.displayEffect();



    $scope.videos = [];

    $scope.playerVars = {
      rel: 0,
      showinfo: 0,
      modestbranding: 0,
    }

    $scope.nextPageToken = null;

    $scope.youtubeParams = {
      key: 'AIzaSyAurmOD4QgzS5jBxca1KMUe_GWGuxV6C5Q',
      type: 'video',
      maxResults: '5',
      part: 'id,snippet',
      q: 'necatiakcay',
      order: 'date',
      channelId: 'UCpdJQ9OrynGRA110wHO2_iA',
    }

    function loadVideos(params, callback) {
      $http.get('https://www.googleapis.com/youtube/v3/search', {params: params}).success(function(response){

        var videos = [];
        if(response.nextPageToken) {
          $scope.nextPageToken = response.nextPageToken;
          console.log ($scope.nextPageToken);
          angular.forEach(response.items, function(child){
            videos.push(child);
          });
        }
        callback(videos);

      });
    }

    $scope.loadOlderVideos = function() {
      var params = $scope.youtubeParams;
      if ($scope.nextPageToken) {
        params['pageToken'] = $scope.nextPageToken;
      }
      loadVideos(params, function(olderVideos){
        if (olderVideos) {
          $scope.videos = $scope.videos.concat(olderVideos);
        }
        $scope.$broadcast('scroll.infiniteScrollComplete');
      });
    };

    $scope.loadNewerVideos = function() {
      var params = $scope.youtubeParams;
      params['pageToken'] = '';
      loadVideos(params, function(newerVideos) {
        $scope.videos = newerVideos;
        $scope.$broadcast('scroll.refreshComplete');
      });

    };
<ion-view view-title="Gallery">
    <ion-content>
      <ion-refresher
          pulling-text="Yükleniyor..."
          on-refresh="loadNewerVideos()">
        </ion-refresher>
        <div  class="list slide-up">
            <div id="aktif" ng-repeat="video in videos track by video.id.videoId" style="width: 100%; margin: 0px;" class="card card-gallery item item-text-wrap">
                <div class="ink dark-bg">
          <h2>{{video.snippet.title}}</h2>
          <p>{{video.snippet.publishedAt | limitTo: 10}}</p>
                <div class="embed-responsive embed-responsive-16by9">
              <youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video>
            </div>
                </div>
                <div class="tabs tabs-icon-left static">
                    <a style="max-width: 100%;" class="tab-item stable-bg assertive">
                        <i class="icon ion-heart"></i>
                        4
                    </a>
                    <a style="max-width: 100%;" class="tab-item stable-bg assertive">
                        <i class="icon ion-heart"></i>
                        4
                    </a>
                    <a style="max-width: 100%;" class="tab-item stable-bg positive-900">
                        <i class="icon ion-chatbubbles"></i>
                        2
                    </a>
                </div>
            </div>
            <ion-infinite-scroll
          on-infinite="loadOlderVideos()"
          distance="30%">
        </ion-infinite-scroll>
    </ion-content>
</ion-view>

4

0 回答 0