无限滚动代码无法使用 angularjs？答案

【问题标题】：Infinite scroll code not working using angularjs?无限滚动代码无法使用 angularjs？
【发布时间】：2015-08-13 05:55:22
【问题描述】：

这是我正在使用 angularJS 进行无限滚动的代码。但是代码不起作用，也没有显示错误。这是我的代码：

<!doctype html>
<html  ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>

<style>
li {
  height: 120px;
  border-bottom: 1px solid gray;
}

#fixed {
    height: 400px;
    overflow: auto;
}

</style>

<body ng-controller="myCtrl">
<div id="fixed" when-scrolled="loadMore()" >
  <ul>
    <li ng-repeat="i in items">{{i.id}}</li>
  </ul>  
</div>

<script>
var app = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){

    $scope.items = [];
    
    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.push({id: counter});
            counter += 10;
        }
    };
    
    $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];
        
        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

</script>
</body>
</html>

我认为 ng-app 或 ng-controller 存在一些问题。由于我是 angularjs 新手，请帮我解决这个问题。

提前致谢。

【问题讨论】：

控制台是否出现错误？
是的，现在我遇到了一个错误。您可以照原样复制我的代码或运行 sn-p 以查看错误。谢谢！

标签： javascript angularjs scroll infinite-scroll nginfinitescroll

【解决方案1】：

除了你有很多语法错误之外，我看不出代码有任何问题。更正以下内容时为works。

错误的变量引用：

var app = angular.module('myApp', []);//'app' variable declared but later 
//referenced as 'myApp'
app.controller('myCtrl', function($scope){

控制器函数最后缺少);

并且由于某种原因为指令声明了一个新模块，但未注入myApp。除非你有明确的理由，否则不要产生不必要的模块。获取您已经定义的同一个

app.directive('whenScrolled', function() {

【讨论】：