Angularjs 滾動(dòng)加載更多數(shù)據(jù)

    下面的例子只是為了簡(jiǎn)單記錄怎么使用angularjs來實(shí)現(xiàn)滾動(dòng)加載數(shù)據(jù)，具體的還是需要具體看待:
    Javascript部分的controller
    app.controller('AnalysizerCtrl', ['$scope', '$timeout', '$window',
    function ($scope, $timeout, $window) {
    $scope.showData = false;
    $scope.isLoadingPIG = false;
    $scope.isLoadingUJ = false;
    $scope.isLoadingBoxSummary = false;
    $scope.LoadingData = function (index) {
    $scope.showData = true;
    var pigHeight = $(".analysisContainer")[1].children[1].scrollHeight;
    var ujHeight = $(".analysisContainer")[1].children[2].scrollHeight;
    var boxSummaryHeight = $(".analysisContainer")[1].children[3].scrollHeight;
    if (index == 0) {
    //$scope.reLoadData = true;
    pigHeight = 0;
    ujHeight = 0;
    $scope.gridOptions.data = null;
    }
    var showSummaryBox = function () {
    $scope.isLoadingBoxSummary = false;
    }
    var showUj = function () {
    $scope.isLoadingUJ = false;
    //$scope.isLoadingSummaryBox = true;
    //$timeout(showSummaryBox, 1000);
    }
    var showPig = function () {
    $scope.isLoadingPIG = false;
    //$scope.isLoadingUJ = false;
    //$timeout(showUj, 10000);
    }
    if (pigHeight == 0) {
    $scope.isLoadingPIG = true;
    $timeout(showPig, 1000);
    } else if (ujHeight == 0) {
    $scope.isLoadingUJ = true;
    $timeout(showUj, 1000);
    } else if (boxSummaryHeight == 0) {
    $scope.isLoadingBoxSummary = true;
    $timeout(showSummaryBox, 1000);
    }
    };
    }]
    ).directive('whenScrollEnd', function () {
    return function (scope, elm, attr) {
    var pageWindow = $(this);
    pageWindow.bind('scroll', function (et, ed, pb) {
    var winScrollTop = pageWindow.scrollTop();
    var winHeight = pageWindow.height();
    var maxScrollHeight = $(".analysisContainer")[1].scrollHeight;
    if ((winScrollTop + winHeight) > maxScrollHeight) {
    scope.$apply(attr.whenScrollEnd);
    }
    });
    }
    });
    下面是HTML部分：
    <div ng-show="showData" when-scroll-end="LoadingData()">
    <div id="b" ng-show="isLoadingPIG">
    <h6>
    <img src="~/Content/Images/loading2.gif" />
    Loading Win & Convert data...
    </h6>
    </div>
    <div id="a" ng-show="!isLoadingPIG">
    <img src="~/2016-03-16_152323.png" />
    </div>
    <div ng-show="!isLoadingUJ">
    <img src="~/2016-03-16_153347.png" />
    </div>
    <div ng-show="!isLoadingBoxSummary">
    <img src="~/2016-03-16_153404.png" />
    </div>
    </div>
    重要的部分是指令(directive)和滾動(dòng)時(shí)要加載數(shù)據(jù)的部分。
    Angularjs 滾動(dòng)加載更多數(shù)據(jù)的相關(guān)知識(shí)，小編就給大家介紹這么多，希望對(duì)大家有所幫助！