Angularjsでアンカーリンク？

質問

Angularjsでアンカーリンクを使用することは可能でしょうか？

すなわち

 <a href="#top">Top</a>
 <a href="#middle">Middle</a>
 <a href="#bottom">Bottom</a>

 <div name="top"></div>
 ...
 <div name="middle"></div>
 ...
 <div name="bottom"></div>

ありがとうございます

どのように解決するのですか？

いくつかの方法があるようです。

オプション1: ネイティブAngular

Angularは $anchorScroll サービスを提供していますが、ドキュメントがひどく不足しており、私はそれを動作させることができませんでした。

チェックアウト http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html に関するいくつかの洞察は $anchorScroll .

オプション2: カスタムディレクティブ / ネイティブJavaScript

私が試したもう一つの方法は、カスタムディレクティブを作成して el.scrollIntoView() . これは、基本的にディレクティブのリンク関数で次のようにすることで、かなりまともに機能します。

var el = document.getElementById(attrs.href);
el.scrollIntoView();

しかし、ブラウザがネイティブに対応しているのに、この両方を行うのは少し大げさな気がしますよね？

選択肢3：Angularのオーバーライド／ブラウザのネイティブ対応

もし、あなたが http://docs.angularjs.org/guide/dev_guide.services.$location とその HTML Link Rewriting の項を見ると、以下のようにリンクが書き換わらないことがわかるでしょう。

ターゲット要素を含むリンク

例 <a href="/ext/link?a=b" target="_self">link</a>

ということで、あとは target 属性をリンクに追加するだけです。

<a href="#anchorLinkID" target="_self">Go to inpage section</a>

Angularはブラウザのデフォルトとして、そのアンカーリンクは異なるベースURLではないので、ブラウザは望み通り正しい位置にスクロールします。

私はオプション3を選びました。なぜなら、ここではブラウザのネイティブ機能に頼るのが最善であり、私たちの時間と労力を節約できるからです。

スクロールとハッシュの変更が成功した後、Angularがフォローアップしてハッシュをカスタムスタイルに書き換えることに注意しなければなりません。しかし、ブラウザはすでにその仕事を終えており、あなたは行くのに問題ありません。