Angularjs $ anchorScroll不能在ng-view中工作

我的腳本基於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(); 
    }); 
})

我的一個環節

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

的腳本元素，我導航到

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

來源

2013-05-03 Stephen

您需要提供更多信息或在您自己的plnkr中重現您的問題。否則，任何人的答案只是在黑暗中拍攝。 – Langdon 2013-05-07 16:09:44

這是最好的，我可以複製它，同時保持簡單：http://plnkr.co/edit/CqqsWqkIgJzq8A1zwFQW – Stephen 2013-05-07 16:55:12

您提供的plnkr實際上並未使用$ anchorScroll，但我假設您在嘗試重新創建所使用的內容時已將其刪除。如果你把你引用的代碼放回$ anchorScroll，它當然仍然不起作用。

這個問題與你的錨點的href有些相關，這個問題已經被修改了一些。這是你想要的：

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

當你使用散列來瀏覽時，事情會有點不同。正如在你提供的工作示例中，在URL的開頭使用了hash，而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」並將其轉換爲「＃/ article/undefined？scrollTo =/article/23？scrollTo = VerifyingDeviceStatus」，這顯然不起作用。

你到底想用這個RouteController做什麼？

來源

2013-05-07 17:08:35 Langdon

嗯，我認爲這是我現在有 - 我想我對這個plnkr做了一個壞的嘗試。這就是我現在的頁面上的鏈接：'Requesting Proposal'，當我點擊它們時，網址如下所示：'http://url.com/beta#/article/36?scrollTo=requesting-proposal#請求提案「，並在點擊時重新加載視圖。 – Stephen 2013-05-07 18:27:16

@Stephen看我的編輯。 – Langdon 2013-05-07 19:19:55

您質疑的陳述用適當的格式替換了所有的hrefs，因爲數據庫中有大量文章，我認爲這將是測試它的最佳方式。我試圖將數據庫中的html硬編碼爲：'Verifying: Device Status'，它仍然執行相同的操作。 – Stephen 2013-05-07 20:30:53

我希望我能正確理解你的問題。

看來你想鏈接到文章的特定部分使用AngularJS $ anchorScroll來做到這一點。

我遇到了麻煩，無法編輯這裏發佈的任何Plunkers。看起來他們有一個緩存問題。所以我爲它創建了一支筆：http://cdpn.io/kBqmj

不幸的是，你不能在那裏有多個HTML文件，所以我硬編碼了部分模板，但它應該和外部文件具有相同的效果。

我將代碼分成兩個控制器，以便於調試。

的主視圖有兩個鏈接指向同一篇文章的不同部分：

<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>

的文章觀點話，基本上有一定的含量，並與IDS兩個元素爲前：

<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-11 19:50:45 Jonas

謝謝。你和蘭登的）幫助我實現了我所需要的，但是當我嘗試使用滾動發送URL時，它不會自動滾動到該區域，您必須再次單擊該鏈接。是否存在黑客攻擊？ – Stephen 2013-05-13 20:17:59

@Stephen：如果您使用代碼筆進行測試，您將無法將該網址粘貼到瀏覽器中，並期望它可以正常工作.Cyppen使用iframe作爲實際代碼，因此更改瀏覽器網址並不反映網址如果你使用瀏覽器的Web開發工具直接更改iframe src，你可以看到它到達了希望的地方，我建議你在本地機器上試試它 – Jonas 2013-05-15 10:43:08

我在本地機器上做了這個，如果我使用scrollTo打開導航到url結束它將我導航到頁面的頂部，但是當我點擊頁面內的鏈接時，它會將我導航到propor位置。這可能是因爲它正在加載頁面文檔後加載視圖？ – Stephen 2013-05-15 16:32:27

Angularjs $ anchorScroll不能在ng-view中工作

回答

相關問題