2

モデルが変更されたときにビュー固有の JavaScript コードを実行する方法を見つけようとしています。以下の例では、「Say」ボタンをクリックするたびに、新しいエントリがモデルに追加され、エントリ リストが更新されます。スタイルシートは、エントリ リストの高さを約 5 エントリに制限します。

のようなものを呼び出す正しい方法は何scrollLastChatEntryElementIntoView();ですか? 要素をビューにスクロールする方法は知っていますが、ビューが更新されたときにこれをいつどのように行うべきかについての情報が見つからないようです。スクリプトはどこで宣言し、いつ呼び出す必要がありますか?

<div class="chat">
   <ol class="entries">
      <li class="entry" ng-repeat="entry in chat.entries">
         <label>{{entry.sender}}</label> {{entry.text}}
      </li>
   </ol>
   <form class="newEntry" ng-submit="chat.newEntry.submit()">
      <input class="text" ng-model="chat.newEntry.text" placeholder="Type to chat"/>
      <span class="button submit" ng-click="chat.newEntry.submit()">Say</span>
   </form>
</div>
4

1 に答える 1

3

私は最近同様の状況にありましたが、その方法は、リスト要素の「DOMSubtreeModified」イベントをリッスンし、新しい要素が追加されると自動的に下にスクロールする「自動スクロール」ディレクティブを作成することでした。

app.directive('autoScrolling', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            var el = angular.element(element);

            scope.scrollDown = function(evt) {
                // scroll down:
                el.scrollTop(el.prop('scrollHeight'));
            };

            scope.scrollDown();
            // each time the DOM element of the list changes, 
            // make sure we are scrolled all the way down...
            element.bind('DOMSubtreeModified', scope.scrollDown);
        }
    };  
});

そして、あなたのリスト要素に

<ol auto-scrolling>...

plnkrのデモはこちら

于 2013-03-19T14:17:03.133 に答える