1

私は ng-repeat と ng-filter の組み合わせを使用して一連のコンテンツをナビゲートするプロジェクトに取り組んでいます。ユーザーがナビゲーション リンクをクリックすると、ページ フィルターが更新されてコンテンツが追加され、ビューポートが次のアンカーにスクロールする必要があります。次に例を示します。

ナビ

<li class="nav"><a href="#first-section" id="first-link">First Section</a></li>
<li class="nav"><a href="#second-section" id="second-link">Second Section</a></li>
<li class="nav"><a href="#third-section" id="third-link">Third Section</a></li>

コントローラ

$('li.nav').click(function (event) {
    var navId = event.target.id; //Get ID of clicked link
    switch (navId) {
        case 'first-link':
            $scope.Filter = { type: 'first-section' }; //Set ng-filter "Filter" to only show content from first section.
            $('html, body').animate({
                scrollTop: $("#first-section").offset().top //Scroll to first section.
            }, 2000);
            break;
        case 'second-link': //Second verse, same as the first.
            $scope.Filter = { type: 'second-section' }; //The 2nd section also includes section 1, so that a user can scroll back up.
            $('html, body').animate({
                scrollTop: $("#Evolution").offset().top
            }, 2000);
            break;
    };
});

2 番目のフィルターには最初のフィルターのコンテンツも含まれていることに注意してください (ユーザーがページを上にスクロールできるようにしたいです。ページにまだ存在しない要素の場合、風はすぐに ng-repeat 要素にジャンプします (スクロールなし) 要素がページに既に存在する場合 (たとえば、ユーザーが 3 番目のセクションにいて、クリックして最初のセクションに戻る場合)、スクロールは正常に機能します。

質問: ng-filter の起動後にページ上の要素の位置を再計算するように scrollTop を更新する方法はありますか?

なぜ ng-repeat なのか? このサイトはコンテンツが重いので、AJAX-y の方法でロードするだけでなく、ユーザーがコンテンツを検索できるものを探していました (2 番目のフィルターはここには示されていません)。

4

0 に答える 0