ng-repeat div在用ngInfiniteScroll加載第二頁後消失

Question

這個Angular腳本從API獲取內容，並且我實現了ngInfiniteScroll以避免從源中一次獲得整個內容。當ngInfiniteScroll函數觸發加載第二個頁面時，您可以看到內容加載了幾分之一秒，但隨後整個div消失了。任何想法爲什麼？

LIVE實施例

http://nolayout.com/archive/index-2.html

ANGULAR SCRIPT

var app = angular.module('arenaApp', ['ngResource', 'ngSanitize', 'infinite-scroll']); 

    app.controller('channelShow', function($scope, $resource, $routeParams, $rootScope) { 

     var Channel = $resource('http://api.are.na/v2/channels/:slug/contents'); 
     $scope.channel = []; 
     var channel = Channel.get({ slug: 'no-layout-archive', per: 20, sort: 'position', direction: 'asc' }, function() { 
      $scope.channel = channel; 
     }); 

     $scope.busy = false; 
     $scope.page = 1; 

     $scope.appendContents = function() { 
      if ($scope.busy) return; 
      $scope.busy = true; 
      $scope.page++; 
      var channel = Channel.get({ slug: 'no-layout-archive', per: 20, page: $scope.page, sort: 'position', direction: 'asc' }, function() { 
        $scope.channel = channel; 
        $scope.busy = false; 
      }); 
     } 
    }); 

HTML

<div class="container" infinite-scroll="appendContents()" infinite-scroll-disabled="busy" infinite-scroll-distance="1" > 
    <div ng-repeat="block in channel.contents | filter:query" > 
     <div ng-if="block.class == 'Image'"> 
      <div class="seven columns add-bottom imgnormal"> 
       <img src="{{block.image.original.url}}" alt="{{block.title}}"> 
      </div> 
     </div> 
    </div> 
    <div ng-show="busy">Loading</div> 
</div> 

Answer 1

var app = angular.module('arenaApp', ['ngResource', 'ngSanitize', 'infinite-scroll']); 

    app.controller('channelShow', function($scope, $resource, $routeParams, $rootScope) { 

     var Channel = $resource('http://api.are.na/v2/channels/:slug/contents'); 

     // change this 
     // $scope.channel = []; 
     $scope.channel = {contents:[]}; 

     // remove this, double request 
     // var channel = Channel.get({ slug: 'no-layout-archive', per: 20, sort: 'position', direction: 'asc' }, function() { 
      $scope.channel = channel; 
     }); 

     $scope.busy = false; 
     $scope.page = 1; 

     $scope.imageloaded = function() { 
      $scope.imagesloaded++; 
      if ($scope.imagesloaded >= $scope.channel.contents.length) 
      $scope.busy = false; 
     } 
     $scope.appendContents = function() { 
      if ($scope.busy) return; 
      $scope.busy = true; 
      $scope.page++; 
      var channel = Channel.get({ slug: 'no-layout-archive', per: 20, page: $scope.page, sort: 'position', direction: 'asc' }, function() { 
        // change this 
        // $scope.channel = channel; 
        $scope.channel.contents = $scope.channel.contents.concat(channel.contents); 
        $scope.imagesloaded = 0; 
      }); 
     } 
    }); 

// add a directive in javascript 
app.directive("imageLoaded", function() { 
    return { 
     restrict: "A", 
     link: function(scope, elem, attr) { 
     elem.on('load', function() { 
      scope.$parent.imageloaded(); 

     }); 
     } 
    }; 
    }); 


<div class="container" infinite-scroll="appendContents()" infinite-scroll-disabled="busy" infinite-scroll-distance="1" > 
    <div ng-repeat="block in channel.contents | filter:query" > 
     <div ng-if="block.class == 'Image'"> 
      <div class="seven columns add-bottom imgnormal"> 
       <!-- use ng-src for image read: http://docs.angularjs.org/api/ng/directive/ngSrc --> 
       <img ng-src="{{block.image.original.url}}" image-loaded alt="{{block.title}}"> 
      </div> 
     </div> 
    </div> 
    <div ng-show="busy">Loading</div> 
</div>