79

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>

ありがとうございました

4

11 に答える 11

108

これを行うにはいくつかの方法があるようです。

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

Angular は$anchorScrollサービスを提供していますが、ドキュメントが著しく不足しており、機能させることができませんでした。

についての洞察については、http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.htmlをご覧ください$anchorScroll。

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

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

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

ただし、ブラウザがネイティブでサポートしている場合、これらの両方を行うのは少し誇張されているように思えますよね?

オプション 3: Angular Override / ネイティブ ブラウザー

http://docs.angularjs.org/guide/dev_guide.services.$locationとその HTML リンク書き換えセクションを見ると、次のリンクが書き換えられていないことがわかります。

対象要素を含むリンク

例：<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 はフォローアップしてハッシュをカスタム スタイルに書き換えることに注意してください。ただし、ブラウザはすでにその役割を果たしているので、準備は万端です。

于 2013-08-22T06:19:05.290 に答える
27

それがあなたの質問に答えるかどうかはわかりませんが、はい、次のようなangularjsリンクを使用できます。

<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>

AngularJSWebサイトに良い例があります。

http://docs.angularjs.org/api/ng.directive:ngHref

更新：AngularJSのドキュメントは少しあいまいで、適切なソリューションを提供していませんでした。ごめん！

ここでより良い解決策を見つけることができます：AngularJSでアンカーハッシュリンクを処理する方法

于 2012-12-26T01:08:10.380 に答える
24

anchorScrollを使用してみてください。

例

したがって、コントローラーは次のようになります。

app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
  $scope.scrollTo = function(id) {
     $location.hash(id);
     $anchorScroll();
  }
});

そしてビュー：

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

...アンカー ID のシークレットはありません:

<div id="foo">
  This is #foo
</div>
于 2013-10-18T22:09:31.957 に答える
7

$anchorScroll は確かにこれに対する答えですが、最近のバージョンの Angular ではそれを使用するためのはるかに優れた方法があります。

現在、$anchorScroll はオプションの引数としてハッシュを受け入れるため、$location.hash をまったく変更する必要はありません。(ドキュメント)

ルートにはまったく影響しないため、これが最適なソリューションです。私は ngRoute を使用していて$location.hash(id)、 $anchorScroll がその魔法を実行する前に、設定するとすぐにルートがリロードされるため、他のソリューションを機能させることができませんでした。

これを使用する方法は次のとおりです...最初に、ディレクティブまたはコントローラーで：

$scope.scrollTo = function (id) {
  $anchorScroll(id);  
}

そしてビューで：

<a href="" ng-click="scrollTo(id)">Text</a>

また、固定ナビゲーション バー (または他の UI) を考慮する必要がある場合は、次のように $anchorScroll のオフセットを設定できます (メイン モジュールの run 関数内)。

  .run(function ($anchorScroll) {
      //this will make anchorScroll scroll to the div minus 50px
      $anchorScroll.yOffset = 50;
  });
于 2016-01-27T04:25:29.233 に答える
1

私は同じ問題を抱えていましたが、これは私にとってはうまくいきました：

<a ng-href="javascript:void(0);#tagId"></a>
于 2015-10-02T18:12:56.973 に答える
0

私にとって最良の選択は、作業を行うためのディレクティブを作成することでした。これは、URL$location.hash()を $anchorScroll()ハイジャックすると、SPA ルーティングに多くの問題が発生するためです。

MyModule.directive('myAnchor', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, elem, attrs, ngModel) {
      return elem.bind('click', function() {
        //other stuff ...
        var el;
        el = document.getElementById(attrs['myAnchor']);
        return el.scrollIntoView();
      });      
    }
  };
});
于 2014-07-16T02:02:35.700 に答える
0

または、単に次のように書くこともできます。

ng-href="\#yourAnchorId"

ハッシュ記号の前のバックスラッシュに注意してください

于 2014-04-23T09:48:39.967 に答える
0

SharePoint と angular を使用している場合は、以下のようにします。

<a ng-href="{{item.LinkTo.Url}}" target="_blank" ng-bind="item.Title;" ></a>

ここで、LinkTo と Title は SharePoint 列です。

于 2015-09-04T11:51:00.343 に答える