1

私のスクリプトはhttp://plnkr.co/edit/De6bBrkHpojgAbEvHszuに基づいて いますが、ID アンカーを使用したリンクはすべてビュー内にあり、クリックするたびに要素に移動せず、ビューをリロードするだけです。何か案は？

私が使用しているスクリプト

/*Intercept onpage anchor hash usage: <a href="#/test?scrollTo=foo">Test/Foo</a> */
Site.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
})

私のリンクの 1 つ

<a href="#/article/10?scrollTo=test" target="">Test</a>

ナビゲートしている要素

<h3 id="test">Test</h3>
4

2 に答える 2

2

あなたの問題を正しく理解できたと思います。

AngularJS の $anchorScroll を使って記事の特定の部分にリンクしたいようです。

ここに投稿されたプランカーを編集するのに苦労しました。キャッシュに問題があるようです。だから私はそれのためのペンを作成しました：http://cdpn.io/kBqmj

残念ながら、そこに複数の HTML ファイルを含めることはできないため、部分的なテンプレートをハードコーディングしましたが、外部ファイルでも同じ効果が得られるはずです。

デバッグしやすいように、コードを 2 つのコントローラーに分けました。

ホーム ビューには、同じ記事の異なる部分を指す 2 つのリンクがあります。

<ol>
  <li><a href=\"#/article/1?scrollTo=InterestingStuff\" target=''>Article 1: Interesting stuff</a></li>
  <li><a href=\"#/article/1?scrollTo=ImportantStuff\" target=''>Article 1: Don't miss it stuff</a></li>
</ol>

記事ビューには基本的に、以前と同じように、いくつかのコンテンツと id を持つ 2 つの要素があります。

<p>A lot of introduction, followed by something else</p>
<br> 
... 
<br>
<h1 id='InterestingStuff'>Interesting stuff in the middle</h1>
<br> 
... 
<br>
<h1 id='ImportantStuff'>Important stuff at the end</h1>

なぜうまくいかなかったのか正確にはわかりませんので、私のコードを見てください。少なくともソリューションの出発点として役立つことを願っています。

于 2013-05-11T19:50:45.883 に答える
1

あなたが提供したplnkrは実際には$anchorScrollを利用していませんでしたが、あなたが作業していたものを再作成しようとしたときに削除されたと思います. 参照した $anchorScroll を呼び出したコードを元に戻してSite.runも、もちろん動作しません。

問題は、アンカーの href に関係しており、少し壊れています。これはあなたが望むものです：

<a href='#?scrollTo=VerifyingDeviceStatus' target=''>...</a>

ハッシュを使用してナビゲートする場合、物事の流れは少し異なります。あなたが提供した実際の例のように、ハッシュはURLの先頭で使用され、scrollTo "querystring"パラメータは$anchorScrollによって暗示されているため、余分な#を必要としません.

plnkr を修正: http://plnkr.co/edit/Y1pHKjnAgo6hwjQvardy?p=preview

〜

次のステートメントはどうなりますか?

var result = data[0].content.replace(/href="#/g, 'href="#/article/' + slug + '?scrollTo=');

おそらくこれが問題の原因です。二重引用符ではなく一重引用符を使用しているため、plnkr では何もしませんが、HTML を変更して二重引用符を使用すると、説明したようにページがリロードされます。

http://plnkr.co/edit/sdxjlRWkiLr53L6MELTZ?p=preview

「#/article/23?scrollTo=VerifyingDeviceStatus」のような完全に機能する URL を取り、それをこの「#/article/undefined?scrollTo=/article/23?scrollTo=VerifyingDeviceStatus」に変換しますが、これは明らかに機能しません。

この RouteController で正確に何をしようとしていますか?

于 2013-05-07T17:08:35.570 に答える