Высота вызывает проблему в теге div в ng Бесконечный прокрутка

Я использую NIS для бесконечной прокрутки, я реализовал и отлично работает, за исключением одной проблемы. Как я использую float: left для поддержки тега div. Но после использования float он отправляет несколько запросов за раз, но когда я удаляю float:left, он отправляет один запрос, который я хочу.Высота вызывает проблему в теге div в ng Бесконечный прокрутка

Я получаю 20 результатов одновременно с сервера

Я не публичный URL, чтобы дать пример на JsFiddle или Plunker.

Вот мой код

<!DOCTYPE html> 
<html> 

    <head> 
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
    <script src="js/angular/lib/angular.min.js"></script> 
    <script src="js/angular/lib/ng-infinite-scroll.min.js"></script> 
    <script src="js/angular/customjs/endless_scroll.js"></script> 
    <style type="text/css"> 
    .test{ 
     float:left; 
    } 
    </style> 
    </head> 

    <body ng-app="myApp"> 
    <div ng-controller='DemoController'> 
     <div id="scroll" infinite-scroll='reddit.nextPage();' 
     infinite-scroll-container="'scroll'" 
     infinite-scroll-disabled='reddit.stopscript' 
     infinite-scroll-distance='2'>    

     <div ng-repeat='item in reddit.items'> 
      <div class="test"> 
      <div style="height:30px;width:200px; border-style:solid;border-width:medium;">{{item.bookmark_id}}</div> 
      <div style="height:100px;width:200px; border-style:solid;border-width:medium;">{{item.bookmark_title}}</div> 
     </div> 
     </div> 
    </div> 
    <div ng-show='reddit.busy'>Loading data...</div> 
    </div> 
    </body> 
</html>

А вот мой контроллер

var myApp = angular.module('myApp', ['infinite-scroll']); 

myApp.controller('DemoController', function ($scope, Reddit) { 
    $scope.reddit = new Reddit(); 
}); 

myApp.factory('Reddit', function ($http) { 
    var Reddit = function() { 
    this.items = []; 
    this.busy = false; 
    this.stopscript = false; 
    }; 

Reddit.prototype.nextPage = function() { 

    if (this.busy){ 
    return; 
    } 
else{ 
    this.busy = true; 

var url = "http://example.com/get_recent_articles/"; 
    $http.get(url).success(function (data) { 
    if (data.recently_added.bookmarks.length == 0) { 

     this.stopscript = true; 
    } 
    else {    
     this.items.push.apply(this.items, data.recently_added.bookmarks);    
    } 
    this.busy = false; 
    }.bind(this)); 
    } 
}; 
return Reddit; 
});

Может кто-нибудь помочь мне решить эту проблему?

Thank you.

источник

2014-12-08 abdulbarik

попытка с помощью 'дисплея: инлайн-block' вместо' поплавка: left' –

@VitorinoFernandes Когда я использую 'Дисплей: инлайн-block' то все теги 'Div' отображаются вертикально – abdulbarik

Когда вы плаваете элементы, родительский обрушивается. Я предполагаю, что ваш элемент ng-show - это тот, который запускает загрузку, поэтому вы всегда хотите, чтобы сидеть ниже содержимого (чтобы при прокрутке к нему он запускал загрузку контента). Это означает, что вам нужно использовать clearfix для родителя, чтобы он расширялся с плавающим содержимым, а не сбрасывался.

#images::after { 
    display: block; 
    clear: both; 
    content: " "; 
    width: 0; 
    height: 0; 
}

Вы можете узнать больше о том, как поплавки работать здесь: http://css-tricks.com/all-about-floats/

источник

2014-12-08 07:13:26

Можете ли вы очистить мое сомнение, где поставить этот атрибут изображения? , так как до сих пор я не использовал идентификатор изображений. – abdulbarik

@abarik Попробуйте '# scroll'. '# images' - просто пример; как и в моем сообщении, вам нужно применить его к родительскому элементу с плавающими элементами. –

Я получил это @ Chhristian Спасибо за ответ – abdulbarik

Высота вызывает проблему в теге div в ng Бесконечный прокрутка

ответ

Смежные вопросы