如何使用离子无限滚动延迟加载Firebase数据

时间:2016-02-11 15:54:57

标签: angularjs ionic-framework firebase infinite-scroll snapshot

我在用户个人资料中有一组数据,其中包含他们喜欢的所有帖子的UID。我正在使用数据快照在用户配置文件中显示这些图像,但我想加载它懒惰或使用离子无限滚动来加载更多项目,因为用户滚动。

我尝试了两次重复拍摄。首先在页面加载时初始化Feed,然后我希望使用离子无限卷轴加载第二个。

但它不起作用。

有谁知道更好的方法吗?

service.js

  getWardrobeFeed: function(){
      var defered = $q.defer();
      var user = User.getLoggedInUser();
      var wardrobeKeyRef = new Firebase(FIREBASE_URL + '/userProfile/' + user.uid + '/wardrobe');
      wardrobeKeyRef.orderByKey().limitToLast(2).on('child_added', function (snap) {
        var imageId = snap.key();
        userImageRef.child(imageId).on('value', function (snap) {
          $timeout(function () {
            if (snap.val() === null) {
              delete userWardrobeFeed[imageId];
            } else {
              userWardrobeFeed[imageId] = snap.val();
            }
          });
        });
      });
      wardrobeKeyRef.orderByKey().limitToLast(2).on('child_removed', function (snap) {
        var imageId = snap.key();
        $timeout(function () {
          delete userWardrobeFeed[imageId];
        });
      });
      defered.resolve(userWardrobeFeed);
      return defered.promise;
    },

  getWardrobeItems: function(){
      var defered = $q.defer();
      var user = User.getLoggedInUser();
      var wardrobeKeyRef = new Firebase(FIREBASE_URL + '/userProfile/' + user.uid + '/wardrobe');
      wardrobeKeyRef.orderByKey().limitToFirst(2).on('child_added', function (snap) {
        var imageId = snap.key();
        userImageRef.child(imageId).on('value', function (snap) {
          $timeout(function () {
            if (snap.val() === null) {
              delete userWardrobe[imageId];
            } else {
              userWardrobe[imageId] = snap.val();
            }
          });
        });
      });
      wardrobeKeyRef.orderByKey().on('child_removed', function (snap) {
        var imageId = snap.key();
        $timeout(function () {
          delete userWardrobe[imageId];
        });
      });
      defered.resolve(userWardrobe);
      return defered.promise;
    },

controller.js

  $scope.userWardrobe = [];

  Service.getWardrobeFeed().then(function(items){
    $scope.userWardrobe = items;
  });

  $scope.loadMore = function() {
    Service.getWardrobeItems().then(function(items){
      $scope.userWardrobe = $scope.userWardrobe.concat(items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

0 个答案:

没有答案