Question

之前，抱歉我的英语不好。

当我在Angular UI Bootstrap Modal中使用Angular Infinite Scroll时，我有一些问题，在后端使用Laravel

代码如下所示：

模态身体

<div class="modal-body">
<div class="media-modal-list" infinite-scroll="media.nextPage()" infinite-scroll-disabled='media.busy' infinite-scroll-distance="2" infinite-scroll-container="'.modal'">   
<div class="col-md-3 media-modal-item" ng-repeat="media in media.items">
    <div class="media-modal-thumbnail" ng-show="!media.length">
        <img src="@{{ media.url }}" class="img-responsive">
        <div class="media-modal-thumbnail-action">
            <a href="#" class="media-modal-thumbnail-action-select" ng-class="mediaClass" id="media-select-@{{ media.id }}" ng-click="mediaSelect()"><i class="fa fa-check"></i></a>
        </div>
        <div class="media-modal-thumbnail-title">@{{ media.prev_name | cut:true:7:' ...' }}</div>
    </div>

CSS

.media-modal-list { position: relative; padding: 10px; height: 300px; overflow-y: auto; border: 1px solid #000; }

远程数据

app.factory('Media', function($http) {

    var Media = function() {
        this.items = [];
        this.busy  = false;
        this.page  = 1;
    }

    Media.prototype.nextPage = function() {
        console.log('scroll');
        var url = _url + '/media?page=' + this.page;
        if(this.busy) return;
        this.busy = true;

        $http.get(url).then(function (data) {

            var items = data.data.data;

            for(var i = 0; i < items.length; i++)
            {
                this.items.push(items[i]);
            }

            this.page++;
            this.busy = true;

        }.bind(this));
    };

    return Media;
});

角度控制器

app.controller('mainController', function($scope, Media) {
  ...

  // open modal
  $scope.mediaOpen = function()
{
    var modalInstance = $modal.open({
        templateUrl: _url + '/media/create',
        controller: mediaControl,
        scope: $scope,
        size: 'lg',
        windowClass: 'media-modal',
        backdrop: false,
        resolve: {

        }
    });

    modalInstance.result.then(function (selectedItem) {
        console.log(selectedItem);
        $scope.selected = selectedItem;
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
}
  // data
  $scope.media = new Media();

  ...

 });

当打开Bootstrap Modal时，数据读取得很好，但是当容器（.media-modal-list）滚动无限卷轴不起作用时，没有错误信息。

谢谢

UI Bootstrap模式中的角度无限滚动

0 个答案: