AngularJSでアンカーハッシュリンクを処理する方法

AngularJSでアンカーハッシュリンクをうまく処理する方法を知っている人はいますかますか？

簡単なFAQページの次のマークアップがあります

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

上記のリンクのいずれかをクリックすると、AngularJSがインターセプトして、まったく別のページ（私の場合、リンクに一致するルートがないため、404ページ）にルーティングされます。

私の最初の考えは、「/ faq /：chapter」に一致するルートを作成し、対応するコントローラーチェックで作成することでした$routeParams.chapter一致する要素の後にし、jQueryを使用してその要素までスクロールすることでした。

しかし、AngularJSは再び私にたわごとを与え、とにかくページの上部にスクロールします。

だから、ここの誰かが過去に似たようなことをし、それに対する良い解決策を知っていますか？

編集：html5Modeに切り替えると問題が解決するはずですが、とにかくIE8 +をサポートする必要があるため、受け入れられない解決策ではないかと心配しています：/

あなたが探してい$anchorScroll()ます。

これが（くだらない）ドキュメントです。

そして、これがソースです。

基本的には、それを注入してコントローラーで呼び出すだけで、次の場所にあるIDを持つ任意の要素にスクロールします $location.hash()

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

<a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div>

ここにデモンストレーションするプランカーがあります

編集：これをルーティングで使用するには

通常のように角度ルーティングを設定し、次のコードを追加します。

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});

リンクは次のようになります。

<a href="#/test?scrollTo=foo">Test/Foo</a>

これはルーティングと$ anchorScrollによるスクロールを示すPlunkerです

そしてさらに簡単：

app.run(function($rootScope, $location, $anchorScroll) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});

リンクは次のようになります。

<a href="#/test#foo">Test/Foo</a>

私の場合、を変更すると、ルーティングロジックが機能し始めていることに気付きました$location.hash()。次のトリックはうまくいった。

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    //reset to old to keep any additional routing logic from kicking in
    $location.hash(old);
};

ルーティングを変更する必要はなくtarget="_self"、リンクを作成するときに使用する必要があるものだけです。

例：

<a href="#faq-1" target="_self">Question 1</a>
<a href="#faq-2" target="_self">Question 2</a>
<a href="#faq-3" target="_self">Question 3</a>

次のようにhtml要素でid属性を使用します。

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

コメントで指摘/言及されている##を使用する必要はありません;-)

<a href="##faq-1">Question 1</a>
<a href="##faq-2">Question 2</a>
<a href="##faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

ルートがわかっている場合は、次のようにアンカーを追加するだけです。

href="#/route#anchorID

where routeは現在の角度ルートであり、ページのどこかにanchorID一致<a id="anchorID">します

$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）を考慮する必要がある場合は、次のように（メインモジュールのrun関数で）$ anchorScrollのオフセットを設定できます。

.run(function ($anchorScroll) {
   //this will make anchorScroll scroll to the div minus 50px
   $anchorScroll.yOffset = 50;
});

これは、DOMを扱っているため、よりAngular-yに見えるディレクティブを使用した私の解決策でした。

ここでPlnkr

github

コード

angular.module('app', [])
.directive('scrollTo', function ($location, $anchorScroll) {
  return function(scope, element, attrs) {

    element.bind('click', function(event) {
        event.stopPropagation();
        var off = scope.$on('$locationChangeStart', function(ev) {
            off();
            ev.preventDefault();
        });
        var location = attrs.scrollTo;
        $location.hash(location);
        $anchorScroll();
    });

  };
});

HTML

<ul>
  <li><a href="" scroll-to="section1">Section 1</a></li>
  <li><a href="" scroll-to="section2">Section 2</a></li>
</ul>

<h1 id="section1">Hi, I'm section 1</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

<h1 id="section2">I'm totally section 2</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

$ anchorScrollサービスを使用しました。ハッシュの変更に伴うページ更新を打ち消すために、locationChangeStartイベントをキャンセルしました。ng-switchに接続されたヘルプページがあり、更新するとアプリが本質的に壊れるので、これは私にとってはうまくいきました。

角度ルートのハッシュプレフィックスを設定してみてください $locationProvider.hashPrefix('!')

完全な例：

angular.module('app', [])
  .config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider){
      $routeProvider.when( ... );
      $locationProvider.hashPrefix('!');
    }
  ])

アプリのルートロジックでこれを回避しました。

function config($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/partials/search.html',
      controller: 'ctrlMain'
    })
    .otherwise({
      // Angular interferes with anchor links, so this function preserves the
      // requested hash while still invoking the default route.
      redirectTo: function() {
        // Strips the leading '#/' from the current hash value.
        var hash = '#' + window.location.hash.replace(/^#\//g, '');
        window.location.hash = hash;
        return '/' + hash;
      }
    });
}

これは古い投稿ですが、さまざまなソリューションの調査に長い時間を費やしたので、もう1つのシンプルなソリューションを共有したいと思いました。タグに追加target="_self"するだけで<a>修正されました。リンクが機能し、ページ上の適切な場所に移動します。

ただし、Angularは依然としてURLの＃に奇妙さを注入しているため、このメソッドを使用した後にナビゲーションなどの戻るボタンを使用すると問題が発生する可能性があります。

これはngViewの新しい属性である可能性がありますがangular-route、ngView autoscroll属性と「ダブルハッシュ」を使用して動作するようにアンカーハッシュリンクを取得することができました。

ngView（自動スクロールを参照）

（次のコードは角度ストラップで使用されました）

<!-- use the autoscroll attribute to scroll to hash on $viewContentLoaded -->    
<div ng-view="" autoscroll></div>

<!-- A.href link for bs-scrollspy from angular-strap -->
<!-- A.ngHref for autoscroll on current route without a location change -->
<ul class="nav bs-sidenav">
  <li data-target="#main-html5"><a href="#main-html5" ng-href="##main-html5">HTML5</a></li>
  <li data-target="#main-angular"><a href="#main-angular" ng-href="##main-angular" >Angular</a></li>
  <li data-target="#main-karma"><a href="#main-karma" ng-href="##main-karma">Karma</a></li>
</ul>

私はそうすることができます：

<li>
<a href="#/#about">About</a>
</li>

これは、指定された要素にスクロールするカスタムディレクティブを作成することによる一種のダーティな回避策です（ハードコードされた「faq」を使用）

app.directive('h3', function($routeParams) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs){        
        if ('faq'+$routeParams.v == attrs.id) {
          setTimeout(function() {
             window.scrollTo(0, element[0].offsetTop);
          },1);        
        }
    }
  };
});

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

<a href="/#/#faq-1">Question 1</a>
<a href="/#/#faq-2">Question 2</a>
<a href="/#/#faq-3">Question 3</a>

使用したくない場合はng-click、ここで代替ソリューションを使用できます。filter現在の状態に基づいて正しいURLを生成するために使用します。私の例ではui.routerを使用しています。

利点は、ユーザーがリンクにカーソルを合わせると表示されることです。

<a href="{{ 'my-element-id' | anchor }}">My element</a>

フィルター：

.filter('anchor', ['$state', function($state) {
    return function(id) {
        return '/#' + $state.current.url + '#' + id;
    };
}])

ng-routeを使用した私のソリューションは、次の単純なディレクティブでした。

   app.directive('scrollto',
       function ($anchorScroll,$location) {
            return {
                link: function (scope, element, attrs) {
                    element.click(function (e) {
                        e.preventDefault();
                        $location.hash(attrs["scrollto"]);
                        $anchorScroll();
                    });
                }
            };
    })

HTMLは次のようになります。

<a href="" scrollTo="yourid">link</a>

あなたは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>

Angularアプリをアンカーオポンロードまでスクロールさせ、$ routeProviderのURL書き換えルールにぶつかりました。

長い実験の後、私はこれに落ち着きました：

1. Angularアプリモジュールの.run（）セクションからdocument.onloadイベントハンドラーを登録します。
2. ハンドラーで、いくつかの文字列操作を実行することにより、元のアンカータグがどうなっていたかを調べます。
3. 削除されたアンカータグでlocation.hashをオーバーライドします（これにより、$ routeProviderはすぐに「＃/」ルールで再度上書きします。ただし、AngularがURL 4で行われていることと同期しているので問題ありません）。 $ anchorScroll（）。

angular.module("bla",[]).}])
.run(function($location, $anchorScroll){
         $(document).ready(function() {
	 if(location.hash && location.hash.length>=1)    		{
			var path = location.hash;
			var potentialAnchor = path.substring(path.lastIndexOf("/")+1);
			if ($("#" + potentialAnchor).length > 0) {   // make sure this hashtag exists in the doc.                          
			    location.hash = potentialAnchor;
			    $anchorScroll();
			}
		}	 
 });

これが常に機能するかどうかは100％わかりませんが、私のアプリケーションでは、これによって期待される動作が得られます。

あなたがABOUTページにいて、あなたが次のルートを持っているとしましょう：

yourApp.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
            when('/about', {
                templateUrl: 'about.html',
                controller: 'AboutCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
        }
]);

今、あなたのHTMLで

<ul>
    <li><a href="#/about#tab1">First Part</a></li>
    <li><a href="#/about#tab2">Second Part</a></li>
    <li><a href="#/about#tab3">Third Part</a></li>                      
</ul>

<div id="tab1">1</div>
<div id="tab2">2</div>
<div id="tab3">3</div>

結論として

アンカーが私のためにトリックをする前にページ名を含めること。あなたの考えを教えてください。

欠点

これにより、ページが再レンダリングされ、アンカーまでスクロールします。

更新

より良い方法は、以下を追加することです：

<a href="#tab1" onclick="return false;">First Part</a>

スクロール機能を簡単に入手できます。また、追加機能としてアニメーション/スムーズスクロールもサポートしています。Angular Scrollライブラリの詳細：

Github - https://github.com/oblador/angular-scroll

バウアー：bower install --save angular-scroll

npm：npm install --save angular-scroll

圧縮バージョン -わずか9kb

スムーズスクロール（アニメーションスクロール） -はい

スクロールスパイ -はい

ドキュメンテーション -優れた

デモ - http://oblador.github.io/angular-scroll/

お役に立てれば。

@Stoyanに基づいて、私は次の解決策を思いつきました：

app.run(function($location, $anchorScroll){
    var uri = window.location.href;

    if(uri.length >= 4){

        var parts = uri.split('#!#');
        if(parts.length > 1){
            var anchor = parts[parts.length -1];
            $location.hash(anchor);
            $anchorScroll();
        }
    }
});

ルート変更時に、ページの上部にスクロールします。

 $scope.$on('$routeChangeSuccess', function () {
      window.scrollTo(0, 0);
  });

このコードをコントローラーに配置します。

私の考えでは@slugslogにはそれがありましたが、私は1つ変更します。代わりに置換を使用するので、元に戻す必要はありません。

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id).replace();
    $anchorScroll();
};

「置換方法」のドキュメント検索

上記の解決策はどれも私にとってはうまくいきませんが、私はこれを試してみましたが、うまくいきました、

<a href="#/#faq-1">Question 1</a>

そのため、インデックスページから始めて従来のアンカーを使用するようにページに通知する必要があることに気付きました。

angularjsアプリケーションのハッシュナビゲーションが機能しない場合があり、ブートストラップjquery javascriptライブラリはこのタイプのナビゲーションを広範囲に使用して、target="_self"アンカータグに追加して機能させます。例えば<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

https://code.angularjs.org/1.4.10/docs/api/ngRoute/provider/ $ routeProviderを参照してください

[reloadOnSearch = true]-{boolean =}-$ location.search（）または$ location.hash（）のみが変更されたときにルートをリロードします。

これをfalseに設定すると、上記のすべてがなくても問題は解決しました。

AngularJS 1.3.15を使用していますが、特別なことをする必要はないようです。

https://code.angularjs.org/1.3.15/docs/api/ng/provider/ $ anchorScrollProvider

だから、以下は私のhtmlで私のために働きます：

<ul>
  <li ng-repeat="page in pages"><a ng-href="#{{'id-'+id}}">{{id}}</a>
  </li>
</ul>
<div ng-attr-id="{{'id-'+id}}" </div>

コントローラーやJavaScriptに変更を加える必要はまったくありませんでした。