私は 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 番目のフィルターはここには示されていません)。