LoginSignup
4
4

More than 5 years have passed since last update.

AngularJSでページ内リンクを使う

Posted at

HTMLファイル

list.html
<a href="" ng-click="gotoAnchor('abc')">abc</a>
<a href="" ng-click="gotoAnchor('xyz')">xyz</a>
...
<a name="abc">
<div id="xyz">

ルーティング

main.js
.when("/list", {
    templateUrl: "list.html",
    controller: "listController",
    reloadOnSearch: false, // ←ココ
})

reloadOnSearch: falseにすることでページのリロードが走らない。

コントローラー

listController.js
$scope.gotoAnchor = function(id) {
    $location.hash(id);
    $anchorScroll();

    // ハッシュクリア
    $location.url($location.path());
};

一度でも$location.hash()が実行されると、他のページに移ってもURLの最後にハッシュが残ってしまう。
実害はないが気持ち悪いため、$anchorScroll()後にURLのハッシュを消している。
ただ、上記の方法はクエリーパラメータも消してしまうので、クエリーパラメータを使うページでは検討が必要。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4