为什么我的何时滚动无法在以下代码中工作

Question

我正在尝试在用户滚动事件时向下滚动表时加载数据，但是在滚动过程中没有发生 我必须在以下代码中实现分页机制
 逐步描述

• 第一次加载页面时会加载一些数据
• 然后，当用户向下滚动时，下一批数据将从数据库中加载，并且将一直持续到用户向上滚动

app.service("UserService", function ($http) {
    this.getAllUserList = function () {
        return $http.get("/FarmerRegistermaster/getAllUser");
    };
});

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

    return function (scope, elm, attr) {
        var raw = elm[0];

        //alert(attr);

        elm.bind('scroll', function () {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

app.controller('UserCtrl', function ($scope, UserService) {
    //GetAll();

    $scope.loaderMore = false;
    $scope.scrollended = false;

    var IsPaging = 0;
    var UserID = 1;
    var page = 1;
    var PageSize = 20;
    var inCallback = false;
    var totalData = 0;



    //******=========Get All Data with Paging=========******  
    $scope.loadData = function (IsPaging) {
        alert("When Scrolled  " + IsPaging);
        var geturl = '/FarmerRegistermaster/getAllUser';
        if (IsPaging === 1) {
            //debugger;  
            IsPaging = 1;
            if (page > -1 && !inCallback) {
                inCallback = true;
                page++;

                $scope.loaderMore = true;
                $scope.LoadMessage = ' Loading page ' + page + ' of ' + PageSize + ' data...';
                $scope.result = "color-green";

                var getUser = UserService.getAllUserList();
                getUser.then(function (response) {
                    $scope.UserList = response.data;
                }, function () {
                    $.notify("Error to load data...", "error");
                });
                var getUser = UserService.getAllUserList();
                getUser.then(function (response) {
                    $scope.UserList.push(response.data);
                }, function () {
                    $.notify("Error to load data...", "error");
                });
            }
        } //unlimited load data while scroll  
        else {
            //debugger;  
            IsPaging = 0;
            $scope.loaderMore = true;
            $scope.LoadMessage = 'Loading page ' + page + ' of ' + PageSize + ' data...';
            $scope.result = "color-green";
            var getUser = UserService.getAllUserList();
            getUser.then(function (response) {
                $scope.UserList = response.data;
            }, function () {
                $.notify("Error to load data...", "error");
            });
        } //default load data while pageload  

    };



    $scope.loadData();
});

    <div ng-controller="UserCtrl" class="panel panel-headline">
        <section class="panel">
            <header class="panel-heading">
                <center><b>User List</b></center>
            </header>
            <div class="panel-body">
                <div class="box box-primary box-body table-responsive  widget-content content_scroll" 
                     when-scrolled="loadData(1)">
                    <table class=" table table-striped table-bordered " cellspacing=" 0">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>USER NAME</th>
                                <th>MOBILE NO</th>
                                <th>EMAIL</th>
                                <th>REG DATE</th>
                                <th>STATUS</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody>

                            <tr ng-repeat="user in UserList >
                                <td>{{user.FARMER_ID}}</td>
                                <td>{{user.FARMER_NAME}}</td>
                                <td>{{user.MOBILE_NO}}</td>
                                <td>{{user.EMAIL_ID}}</td>
                                <td>{{user.REG_DATE | jsonDate}}</td>
                                <td>
                                    {{user.STATUS}}
                                </td>
                                <td>

                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="loadmore">
                        <div ng-show="loaderMore" ng-class="result">
                            <imgsrc ="~/Areas/Crm/Content/img/ng-loader.gif" />{{LoadMessage}}
                        </div>
                        <div ng-show="scrollended" ng-class="result">
                            {{LoadMessage}}
                        </div>
                    </div>

                </div>
                </div>

        </section>
    </div>

    <link href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
  @section Scripts{
    <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="~/AngularJS/DateFilter.js"></script>
    <script src="~/AngularJS/UserCtrl.js"></script>
  }

<script>
        $(document).ready(function () {
            $('#dataTable').DataTable({
                "paging": true,
                "ordering": true,
                "info": true
            });
        });
</script>

当用户滚动时，每次都应该调用reloadData方法，并且要从数据库中获取数据