углового щ> щ-Utils> Ui-прокрутка не работает

Question

Я использую это (v 0.1.0.): http://angular-ui.github.io/ui-utils/ и быть более конкретным образом: https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md

однако это не похоже на работу. Вот пример:

<div ng-scroll-viewport style="height:240px;" class="chat-messages"> 
           <div class="chat-message" ng-scroll="chat in chats"> 
            <div ng-class="$index % 2 == 0? 'sender pull-right' : 'sender pull-left'"> 
             <div class="icon"> 
              <img src="{{chat.img}}" class="img-circle" alt=""> 
             </div> 
             <div class="time"> 
              {{chat.time}} 
             </div> 
            </div> 
            <div ng-class="$index % 2 == 0? 'chat-message-body on-left' : 'chat-message-body'"> 
             <span class="arrow"></span> 
             <div class="sender"><a href="#">{{chat.name}}</a></div> 
             <div class="text"> 
              {{chat.msg}} 
             </div> 
            </div> 
           </div> 

          </div> 

Но все я получаю в HTML заключается в следующем:

<div class="chat"> 

    <div class="chat-messages" style="height:240px;" ng-scroll-viewport=""> 
     <!-- 

     ngScroll: chat in chats 

     --> 
    </div> 

Если я заменяю нг-свиток с нг-повтора, он прекрасно работает. Но чаты нуждаются в полосах прокрутки, поэтому ... Как я могу их получить? :)

Answer 1

Одним из способов получения прокрутки является использование CSS, установка переполнения-y для прокрутки, и вы получите полосу прокрутки.

Если вам нужно прокрутить страницу вниз, играйте с anchorScroll http://docs.angularjs.org/api/ng. $ AnchorScroll.

Answer 2

Документация директивы ngScroll также обманула меня просто заменой ng-repeat на ng-scroll. К сожалению, это оказалось не так просто, см. Также небольшой рабочий пример: http://plnkr.co/edit/fWhe4vBL6pevcuLutGC4.

Обратите внимание, что

1. «DataSource» (или любой другой объект, который вы хотите перебрать для содержимого списка прокрутки) должны реализовать метод «получить (индекс, рассчитывать, успех)», который вызывает успех (результаты), см. hXXps: //github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#data-source

2. Массив должен иметь точно подсчитанные элементы. В противном случае никакое окно/полоса прокрутки никогда не появится, что может быть очень раздражающим!

3. Хотя UI.Utils говорит, что у него нет внешних зависимостей, ui.scroll фактически зависит от ui.scroll.jqlite или jQuery. Поэтому не забудьте указать ui.scroll и ui.scroll.jqlite в определении вашего модуля, который содержит контроллер с объектом datasource (и загружает их .js-файлы или загружает ui-utils.js, который содержит оба), см. https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#dependencies

4. Будьте осторожны, когда ваш сервер отправляет некоторые политики безопасности контента (CSP). Возможно, отключите их, пытаясь сначала запустить ng-scroll, затем повторно примените CSP и настройте соответствующие политики для работы ui.scroll.