angularJs - 滚动加载

以前写过vue 滚动加载、angular8 滚动加载，这次遇到angularJs 滚动加载，记录一下

1， html 页面

需要在滚动的div 上添加控制代码 ng-controller="myProController" 和滚动指令 when-scrolled="scrolledLoadMore()"

<div class="ngdialog-message" bindonce>
  <div class="select-group-user-container" ng-controller="myProController">
    <div class="left">
        <div class="left-list" ng-class="{'active': imageClassify == 'personal'}" ng-click="selectImageClassify('personal')">个人库</div>
        <div class="left-list" ng-class="{'active': imageClassify == 'system'}" ng-click="selectImageClassify('system')">系统库</div>
    </div>
    <div class="right" when-scrolled="scrolledLoadMore()">
      <div class="img-concent" ng-show="selectImageList.length > 0">
        <div class="concent-div" ng-repeat="(key, imgfile) in selectImageList track by key" ng-if="['jpg', 'png', 'jpeg', 'gif', 'bmp'].indexOf(imgfile.obj_type) > -1">
          <img src="{{imgfile.url}}"
          class="img-style"
          alt="加载中...">
          <div class="img-select" ng-click="selectImg(imgfile)">
            <img ng-if="pageImageSrc == imgfile.url" src="/static/img/bdp-ok.png" class="img-select-svg"/>
          </div>
          <div class="img-name" title="{{imgfile.obj_name}}">{{imgfile.obj_name}}</div>
        </div>
      </div>
      <div class="nodata" ng-show="!isSelectImageList && selectImageList.length === 0">
        暂无数据
      </div>
      <div class="nodata" ng-show="!isSelectImageList && getImageListParam.page === selectImageListPagesCount && selectImageList.length > 30">
        没有更多了
      </div>
    </div>
  </div>
</div>

2，js 代码

.controller ("myProController", [ "$scope", function ( $scope ) {
      // 触发事件
      $scope.scrolledLoadMore = function() {
        $scope.$parent.$parent.getImageListMore();
      }
    }]).directive ('whenScrolled', function () {
    return function ( scope, elm, attr ) {
        // 内层DIV的滚动加载
        var raw = elm[ 0 ];
        elm.bind ('scroll', function () {
            if ( raw.scrollTop + raw.offsetHeight >= raw.scrollHeight ) {
                scope.$apply (attr.whenScrolled);
            }
        });
    };
});