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-repeat替换ng-scroll，它可以很好地工作。但聊天需要滚动条，所以...我怎么能得到一个呢？：）

Answer 1

ngScroll指令的文档也欺骗我简单地用ng-scroll替换ng-repeat。不幸的是，结果并不那么简单，请参阅http://plnkr.co/edit/fWhe4vBL6pevcuLutGC4处的小型工作示例。

请注意

＆＃34;数据源＆＃34; （或者你想要为滚动列表的内容迭代的任何对象）必须实现一个方法＆＃34; get（index，count，success）＆＃34;调用成功（结果），请参阅hXXps：//github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#data-source
数组必须具有完全计数元素。否则，将不会显示任何滚动窗口/栏，这可能会非常恼人！
虽然UI.Utils说它没有外部依赖，但ui.scroll实际上依赖于ui.scroll.jqlite或jQuery。因此，请确保在模块定义中列出ui.scroll和ui.scroll.jqlite，其中包含带有数据源对象的控制器（并加载其.js文件，或者加载包含两者的ui-utils.js），请参阅{{3 }}
当您的服务器发送一些内容安全策略（CSP）时要小心。也许在尝试首先使用滚动工作时关闭它们，然后重新应用CSP并相应地调整策略以使ui.scroll工作。

Answer 2

获取滚动的一种方法是使用CSS，设置overflow-y滚动，你会得到滚动条。

如果您需要滚动到底部，请使用anchorScroll http://docs.angularjs.org/api/ng。$ anchorScroll。

angular-ui> ui-utils＆gt; ui-scroll不起作用（v.0.1.0）

2 个答案: