angular-ui > ui-utils > ui-scroll не работает (v. 0.1.0)

Question

Я использую это: 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>

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

Answer 1

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

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

Answer 2

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

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

1. "источник данных" (или любой объект, который вы хотите перебрать для содержимого списка прокрутки) должен реализовывать метод "get(index,count,success)", который вызывает success(results), см. hXXps://github.com/ угловое-щ / UI-Utils / блоб / ведущий / модули / прокрутки /README.md# данные источника

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

3. Хотя UI.Utils говорит, что не имеет внешних зависимостей, ui.scroll фактически зависит от ui.scroll.jqlite или jQuery. Поэтому не забудьте перечислить ui.scroll и ui.scroll.jqlite в определении вашего модуля, который содержит контроллер с объектом источника данных (и загрузить их файлы.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 работал.