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/滚动/ 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上的小型工作示例.

注意

1. "datasource"(或者你想要为滚动列表的内容迭代的任何对象)必须实现一个调用成功(结果)的方法"get(index,count,success)",请参阅hXXps://github.com/角UI/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)时要小心.也许在尝试首先使用滚动工作时关闭它们,然后重新应用CSP并相应地调整策略以使ui.scroll工作.