在bootstrap模式中无限滚动

时间:2014-07-31 11:07:21

标签: angularjs twitter-bootstrap angular-strap nginfinitescroll


我想在AngularStrap模态中进行无限滚动。

我还要修复模态标题和模态页脚,只滚动模态体内的内容。我正在使用ngInfiniteScroll库。

问题在于它显示了两个滚动条,而外栏正在控制无限滚动。

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>

这里是一名掠夺者:http://plnkr.co/edit/mE5EMEYV6Tx3S1VopKfW
但滚动不起作用,因为主页面没有滚动(我认为它出现了同样的问题)
感谢

0 个答案:

没有答案