Javascript AngularJS无限滚动问题

我正在尝试使用无限滚动来延迟加载图像。但调用时，我得到以下错误：

function tagsController($scope) {
    $scope.handleClick = function(tags) {
        // Parse Tags
        $scope.finished_tags = parsed_data;
    };

    $scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};

function imagesController($scope,$http) {

    var rows_per = 5;

    $scope.$on('handleBroadcast', function(event, args) {
        // Sort the images here, put them in matrix
        // Example: matrix[row_number] = { picture1, picture2, picture3 }

        $scope.data = matrix;
        $scope.loadMore();
     };

     $scope.loadMore() = function() {
         var last = $scope.images.length;

         for ( var i = 0; i < rows_per; i++ ) {
             $scope.images[last + i] = new Array();
             $scope.images[last + i] = $scope.data[last + i].slice( 0 );
         }
    }
}

TypeError:undefined不是函数 at handler（）

function tagsController($scope) {
    $scope.handleClick = function(tags) {
        // Parse Tags
        $scope.finished_tags = parsed_data;
    };

    $scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};

function imagesController($scope,$http) {

    var rows_per = 5;

    $scope.$on('handleBroadcast', function(event, args) {
        // Sort the images here, put them in matrix
        // Example: matrix[row_number] = { picture1, picture2, picture3 }

        $scope.data = matrix;
        $scope.loadMore();
     };

     $scope.loadMore() = function() {
         var last = $scope.images.length;

         for ( var i = 0; i < rows_per; i++ ) {
             $scope.images[last + i] = new Array();
             $scope.images[last + i] = $scope.data[last + i].slice( 0 );
         }
    }
}

这是一个非常淡化的外观，我到目前为止。

function tagsController($scope) {
    $scope.handleClick = function(tags) {
        // Parse Tags
        $scope.finished_tags = parsed_data;
    };

    $scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};

function imagesController($scope,$http) {

    var rows_per = 5;

    $scope.$on('handleBroadcast', function(event, args) {
        // Sort the images here, put them in matrix
        // Example: matrix[row_number] = { picture1, picture2, picture3 }

        $scope.data = matrix;
        $scope.loadMore();
     };

     $scope.loadMore() = function() {
         var last = $scope.images.length;

         for ( var i = 0; i < rows_per; i++ ) {
             $scope.images[last + i] = new Array();
             $scope.images[last + i] = $scope.data[last + i].slice( 0 );
         }
    }
}

函数标记控制器（$scope）{
$scope.handleClick=函数（标记）{
//解析标记
$scope.finished_tags=解析的_数据；
};
$scope.$emit（'handleEmit'，{tags=$scope.finished_tags；}）；
};
函数imagesController（$scope，$http）{
var rows_per=5；
$scope.$on（'handleBroadcast'，函数（事件，参数）{
//在这里对图像进行排序，将它们放入矩阵中
//示例：矩阵[行数]={picture1，picture2，picture3}
$scope.data=矩阵；
$scope.loadMore（）；
};
$scope.loadMore（）=函数（）{
var last=$scope.images.length；
对于（变量i=0；i

粗略的想法是，页面第一次加载（没有标签）并从PHP脚本中获取图像。所有这些图像都被存储，并调用loadMore（），它将用5行图像填充$scope.images。确实如此，它们被加载

function tagsController($scope) {
    $scope.handleClick = function(tags) {
        // Parse Tags
        $scope.finished_tags = parsed_data;
    };

    $scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};

function imagesController($scope,$http) {

    var rows_per = 5;

    $scope.$on('handleBroadcast', function(event, args) {
        // Sort the images here, put them in matrix
        // Example: matrix[row_number] = { picture1, picture2, picture3 }

        $scope.data = matrix;
        $scope.loadMore();
     };

     $scope.loadMore() = function() {
         var last = $scope.images.length;

         for ( var i = 0; i < rows_per; i++ ) {
             $scope.images[last + i] = new Array();
             $scope.images[last + i] = $scope.data[last + i].slice( 0 );
         }
    }
}

脚本中的一行是访问$window.height和$window.scrollup。我仍然是相当绿色的w/Javascript，所以如果我做了一些可怕的错误，请随意抨击我

function tagsController($scope) {
    $scope.handleClick = function(tags) {
        // Parse Tags
        $scope.finished_tags = parsed_data;
    };

    $scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};

function imagesController($scope,$http) {

    var rows_per = 5;

    $scope.$on('handleBroadcast', function(event, args) {
        // Sort the images here, put them in matrix
        // Example: matrix[row_number] = { picture1, picture2, picture3 }

        $scope.data = matrix;
        $scope.loadMore();
     };

     $scope.loadMore() = function() {
         var last = $scope.images.length;

         for ( var i = 0; i < rows_per; i++ ) {
             $scope.images[last + i] = new Array();
             $scope.images[last + i] = $scope.data[last + i].slice( 0 );
         }
    }
}

这是我正在测试的损坏版本：

function tagsController($scope) {
    $scope.handleClick = function(tags) {
        // Parse Tags
        $scope.finished_tags = parsed_data;
    };

    $scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};

function imagesController($scope,$http) {

    var rows_per = 5;

    $scope.$on('handleBroadcast', function(event, args) {
        // Sort the images here, put them in matrix
        // Example: matrix[row_number] = { picture1, picture2, picture3 }

        $scope.data = matrix;
        $scope.loadMore();
     };

     $scope.loadMore() = function() {
         var last = $scope.images.length;

         for ( var i = 0; i < rows_per; i++ ) {
             $scope.images[last + i] = new Array();
             $scope.images[last + i] = $scope.data[last + i].slice( 0 );
         }
    }
}

这是一个在延迟加载实现之前的版本，如果看看标签如何工作会有所帮助的话

function tagsController($scope) {
    $scope.handleClick = function(tags) {
        // Parse Tags
        $scope.finished_tags = parsed_data;
    };

    $scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};

function imagesController($scope,$http) {

    var rows_per = 5;

    $scope.$on('handleBroadcast', function(event, args) {
        // Sort the images here, put them in matrix
        // Example: matrix[row_number] = { picture1, picture2, picture3 }

        $scope.data = matrix;
        $scope.loadMore();
     };

     $scope.loadMore() = function() {
         var last = $scope.images.length;

         for ( var i = 0; i < rows_per; i++ ) {
             $scope.images[last + i] = new Array();
             $scope.images[last + i] = $scope.data[last + i].slice( 0 );
         }
    }
}

function tagsController($scope) {
    $scope.handleClick = function(tags) {
        // Parse Tags
        $scope.finished_tags = parsed_data;
    };

    $scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};

function imagesController($scope,$http) {

    var rows_per = 5;

    $scope.$on('handleBroadcast', function(event, args) {
        // Sort the images here, put them in matrix
        // Example: matrix[row_number] = { picture1, picture2, picture3 }

        $scope.data = matrix;
        $scope.loadMore();
     };

     $scope.loadMore() = function() {
         var last = $scope.images.length;

         for ( var i = 0; i < rows_per; i++ ) {
             $scope.images[last + i] = new Array();
             $scope.images[last + i] = $scope.data[last + i].slice( 0 );
         }
    }
}

编辑：我确实认为这是ng-infinite-scroll.js脚本的问题。错误在第31行（版本1.0.0）。它告诉我： TypeError:undefined不是函数 它显然不喜欢$window

function tagsController($scope) {
    $scope.handleClick = function(tags) {
        // Parse Tags
        $scope.finished_tags = parsed_data;
    };

    $scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};

function imagesController($scope,$http) {

    var rows_per = 5;

    $scope.$on('handleBroadcast', function(event, args) {
        // Sort the images here, put them in matrix
        // Example: matrix[row_number] = { picture1, picture2, picture3 }

        $scope.data = matrix;
        $scope.loadMore();
     };

     $scope.loadMore() = function() {
         var last = $scope.images.length;

         for ( var i = 0; i < rows_per; i++ ) {
             $scope.images[last + i] = new Array();
             $scope.images[last + i] = $scope.data[last + i].slice( 0 );
         }
    }
}

---

我的JS功夫还没准备好解释原因。你可以从这里的简单演示中看到一个文字复制/粘贴作业（有错误）onfilm.us/scroll2.html

通过参考您的站点，您的html标记在第一时间似乎不合适。您应该将无限滚动移动到ng repeat指令的父级，这样它就不会对生成的每一行进行重叠调用。请访问

谢谢您的输入。我已经更新了onfilm.us/test.html，但我得到了t同样的问题——infinite-scroll.js中的一个错误。我将尝试实现简单的演示和“构建”从那里开始。我基本上复制/粘贴了简单的演示，我得到了相同的错误。请看一下onfilm.us/scroll.html。我从主站点下载了1.0.0。嘿，你缺少JQuery库参考。注意Angular只提供基本的JQuery功能，不适合无限滚动。请在Angular reference.Al之前添加这个所以你的loadMore fn中有一个输入错误--$scope.imges而不是$scope.imagesys--我昨晚发现了这个问题，我只是来这里修复它。；）谢谢。我遇到了另一个障碍，但这完全是另外一回事。另外，在angular之前包含jquery也很重要，因为您可能会遇到“undefined is not a function”错误。

function tagsController($scope) {
    $scope.handleClick = function(tags) {
        // Parse Tags
        $scope.finished_tags = parsed_data;
    };

    $scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};

function imagesController($scope,$http) {

    var rows_per = 5;

    $scope.$on('handleBroadcast', function(event, args) {
        // Sort the images here, put them in matrix
        // Example: matrix[row_number] = { picture1, picture2, picture3 }

        $scope.data = matrix;
        $scope.loadMore();
     };

     $scope.loadMore() = function() {
         var last = $scope.images.length;

         for ( var i = 0; i < rows_per; i++ ) {
             $scope.images[last + i] = new Array();
             $scope.images[last + i] = $scope.data[last + i].slice( 0 );
         }
    }
}