1

我正在使用这个：http ://angular-ui.github.io/ui-utils/ ，更具体地说：https ://github.com/angular-ui/ui-utils/blob/master/modules/滚动/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，它会完美运行。但是聊天需要滚动条，所以...我怎样才能得到一个？:)

4

2 回答 2

6

ngScroll 指令的文档也诱使我简单地将 ng-repeat 替换为 ng-scroll。不幸的是，结果并非如此简单，另请参阅http://plnkr.co/edit/fWhe4vBL6pevcuLutGC4上的小型工作示例。

注意

  1. “数据源”（或任何您想为滚动列表的内容迭代的对象）必须实现一个调用成功（结果）的方法“get（index，count，success）”，参见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（并加载它们的 .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 工作。

于 2014-05-15T12:35:31.500 回答
1

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

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

于 2014-01-03T23:47:21.097 回答