5

これは、jQuery を使用して簡単に実行できます。

var msgs = $(".messages ul")

var scroll = false

if( msgs[0].scrollHeight  === (msgs.scrollTop() + msgs.outerHeight() ) )
{

    scroll = true

}
$scope.messages.push(data)
if(scroll)
{

    setTimeout(function(){

        msgs.scrollTop(msgs[0].scrollHeight) // Allow it to update!

    },0)


}

コンテキストを示すために、ul はメッセージのコンテナーです。配列を反復処理し$scope.messages、コンテナーが一番下までスクロールされると、一番下にくっつきます。この実装は私にとってはうまくいきます。

さて、私は最近、Angular で jQuery を実際に使用してはならないことを学びました。しかし、純粋なAngularJSでこのようなことをどのように達成できるのでしょうか?

4

4 に答える 4

2

テーブル本体のスクロールで同じ問題に直面しました。以下の方法で解決しました。

これが私のサンプルhtmlです。

<table id="rateplanmapping-scroll">
    <thead>
       <th></th>....
    </thead>
    <tbody >
        <tr ng-repeat="data in datas"> //this is the data
            <td></td>.....
        </tr>
    </tbody>
</table>

上部にスクロールする角度コードは次のとおりです

angular.element("#rateplanmapping-scroll tbody")[0].scrollTop=0;

お役に立てば幸いです。このスクリプトを必要な機能に配置できるため、特定のことが発生したときに自動的にトリガーされます。またはイベントに添付することもできます。お役に立てば幸いです。

div 要素の場合、これは次の方法で行うことができます

http://plnkr.co/edit/0B4zrFTho6GYuPAS0S1A?p=preview

于 2015-04-29T08:40:37.567 に答える
0

私が見た最も簡単な解決策：

$location.hash('focus');

// $anchorScroll() を呼び出します $anchorScroll();

于 2014-08-10T12:54:34.360 に答える