1

私はこれを使用しています: 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 に置き換えると、完全に機能します。しかし、チャットにはスクロール バーが必要なので、どうすれば取得できますか? :)

4

2 に答える 2

6

ngScroll ディレクティブのドキュメントも、単純に ng-repeat を ng-scroll に置き換えるように私をだましました。残念ながら、これはそれほど単純ではありませんでした。 http://plnkr.co/edit/fWhe4vBL6pevcuLutGC4にある小さな実例も参照してください。

ご了承ください

  1. "datasource" (またはスクロール リストの内容を反復処理するオブジェクト) は、success(results) を呼び出すメソッド "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 に答える