ng-repeat div 在第二页加载 ngInfiniteScroll 后消失

Question

这个 Angular 脚本从 API 获取内容，我实现了 ngInfiniteScroll 以避免一次从源获取整个内容。当 ngInfiniteScroll 函数触发加载第二个页面时，您可以看到内容加载了几分之一秒，但随后整个 div 消失了。知道为什么吗？

现场示例

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

角脚本

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>