Infinite scrolling inside a bootstrap modal

Question

I want to make an infinite scroll inside an AngularStrap modal.

I want also to fix the modal header and modal footer and only scroll on what's inside the modal body. I'm using the ngInfiniteScroll library.

The problem is that it's showing two scroll bars and the outer bar is controlling the infinite scroll.

JS:

app.controller('DealCommentsCtrl', function ($scope, $location, callingDealData) {
  if(!callingDealData.getDeal()){
    $location.path('/deals');
  }else{
    $scope.comments = [];
    for(var i=0;i<6;i++){
      $scope.comments.push(COMMENTS[i]);
    }
  }

  $scope.loadMore = function() {
    var last = $scope.comments.length;
    for(var i = last; i <= last + 6; i++) {
      $scope.comments.push(COMMENTS[i]);
    }
  };

HTML:

<div class="modal mymodal" ng-controller="DealCommentsCtrl">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <h4>Comments</h4>
        </div>
        <div class="modal-body">
            <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
              <div ng-repeat="comment in comments">
                {{comment.text}}<br/>
                {{comment.userFullName}}
              </div>
            </div>
        </div>
        <div class="modal-footer">
            <button ng-click="$hide();" class="btn btn-primary">Close</button>
        </div>
    </div>
  </div>
</div>

Here's a plunker: http://plnkr.co/edit/mE5EMEYV6Tx3S1VopKfW
But the scrolling doesn't work because the main page have no scrolling (I think it comes to the same issue)
Thanks

Infinite scrolling inside a bootstrap modal

0 Answers0