Search code examples
javascriptangularjsscrollbarangular-uiui-scroll

angular-ui > ui-utils > ui-scroll does not work (v. 0.1.0)


I am using this: http://angular-ui.github.io/ui-utils/ and to be more specific this:https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md

however it does not seem to work. Here is an example:

<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>

But All I get in HTML is this :

<div class="chat">

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

         ngScroll: chat in chats 

        -->
    </div>

If I replace ng-scroll with ng-repeat, it works perfectly. But chats need scroll bars, so... How can I get one? :)


Solution

  • One way of getting a scroll is to use CSS, set overflow-y to scroll and you will get scroll bar.

    If you need to scroll to the bottom, play with anchorScroll http://docs.angularjs.org/api/ng.$anchorScroll.