Angularを使用するプロジェクトがありますが、UIバインディング/ AJAXの場合のみ、ルーティングやSPAの機能はありません。Angularからhashchangeイベントを削除するか、Angularがアンカーリンクを書き換えないようにします。

は、我々は我々が選択したCMSの中に書くだけでなく、他のページ（/my-page#section-C）から使用アンカーリンクの記事でアンカーリンク（#section-2）を使用することができるようにしたいが、角度分解した、#/section-2にこれらを書き換えCMSが設定するアンカーリンク。

アンカーリンクの処理方法を変更するためにCMSを拡張することはできません。

のいずれかにそれが可能です：

角内から結合hashchangeイベントを削除しますか？このイベントは、ソースファイルsrc/ng/browser.jsに添付されていますが、ルーティングとリンクの書き換えの一部を処理しますが、クロージャの内部にあるため、直接アクセスすることはできません（また、CDNからAngularにリンクしていますAngularソースを変更することも可能ですが、独自の「カスタム」Angularソースを維持する必要もありません）。
最終的にすべてのルーティングアスペクトを無効にするオプションを設定するか、または設定方法を呼び出すと、どのような種類のリンクも書き換えられません。（あるいは、角度のこの部分を含めない方法があるが、それでも結合/ AJAX機能コントローラ/ UIを保持？）私は既にこの試みた

注

$locationProvider.html5Mode(true)

はしかし、すべてのリンクが処理のためにAngularを通過するため、サイト上の他のすべてのリンクが動作不能になります。だから私がホームページ（<a href="/">Home</a>）にリンクしてhtml5modeのリンクをクリックすると、リンクは何もしません。

出典

2016-06-20 qJake

私はセットアップ任意のルートを、単にUIを結合するためのASP.NETプロジェクトの角度をしていない使用していますとngRouteモジュールを使用しないでください。すべてのリンクが正しく動作します – Mikalai

@Mikalaiルーティングを使用していません。また、ngRouteを使用していません。私がやったことは、私のサイトに 'angular.min.js'を入れてアンカーリンクを使ってみることです。そして、Angluarはそれらを書き換えています。 – qJake

回避策がありますが（確かにベストプラクティスではありません）、URLの書き換えを取り除くためにAngularソースを修正しました。

私はいくつかの変更を加えたが、私はアンカーリンクが再び動作させ1が角ソースにlocation.jsのライン844上return;文を追加されたと信じて：

https://github.com/angular/angular.js/blob/master/src/ng/location.js#L844

この短絡URL書き換え機能の大部分を占めています。

また、私は完全に削除された行hashchangeイベントに角度のフックを削除browser.jsの262-264、：

https://github.com/angular/angular.js/blob/master/src/ng/browser.js#L262-264

これは角度の結合機能のいずれかに影響を及ぼしているように見えるが、それはなかったですアンカーリンクが再び働き始める原因となりました。

出典

2016-06-24 16:20:15 qJake

私はあなたがほしいと思うと思います$anchorScroll。この関連する回答を参照してください：How to handle anchor hash linking in AngularJS

これはどのように動作するかの例です。ハッシュは、単にIDの一部として扱われます。

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

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

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

がルーティングでplunker demonstrating $anchorScroll

を参照してください、あなたはへのリンクを変更することができます。

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

と実行構成にこれを追加します。

$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) { 
    if($location.hash()) { 
     $anchorScroll(); 
    } 
});

plunker demonstrating scrolling with routing and $anchorScroll

出典

2016-06-24 01:18:30 ScottL

この問題（およびそれがうまくいかない理由）は、統合されたCMSが従来のHTML方式でのみアンカーリンクを作成することです。あなたの例（ 'Foo'）は、CMSのWYSIWYGエディタがこのようにしてアンカーリンクを生成することができないため、機能しません。 **アンカーリンク形式は変更しないでください** ** – qJake

実際、 '$ routeChangeStarted'、' $ routeChangeSuccess'、 '$ routeChangeError'に引っ掛かっていますが、私が持っているコントローラ内から起動されたイベントはありませんそのページ。私は '$ rootScope'を自分のコントローラに依存するものとして持っています。 – qJake

ngRouteを使用していない場合は、[$ location events]（https://docs.angularjs.org/api/ng/service/$location）にフックしてください –

-2

なぜng-routeを使用しないのですか？それはあなたの問題を完全に解決するでしょう。 Ngルートを使用すると、次のことができます（これはあなたが望むものです）。ここ

<a href="http://www.example.com/base/#section-A"> Section A</a> 

<a href="http://www.example.com/base/my-page#section-C">Another page</a> 

<a href="/other-base/another?search">external</a>

はapp.jsあなたはHTML5ヒストリーAPIモードを使用する場合、あなたは特別なhashbangリンクを必要としません

を書き換える

app.config(function($locationProvider) { 
    $locationProvider.html5Mode(true).hashPrefix('!'); 
})

HTMLリンクをスニペットです。ユーザーがこのリンクをクリックすると、従来のブラウザでは、近代的なブラウザで`/index.html#!/some?foo=bar`

へのURLの変更を

を`<a href="/some?foo=bar">link</a>`

：あなたがしなければならないのは、次のような正規のURLリンクを、指定されURLが`/some?foo=bar`に変更されます。

次のような場合、リンクは書き換えられません。代わりに、ブラウザは元のリンクへのフルページリロードを実行します。ターゲット要素例が含まれている

リンク：異なるドメイン例に行く`<a href="/ext/link?a=b" target="_self">link</a>`

絶対リンク：別のベースパス例につながる「/」で始まる`<a href="http://angularjs.org/">link</a>`

リンク：`<a href="/not-my-base/link">link</a>`

サーバー側

は基本的に、あなたのアプリケーションのエントリポイント（例えば、index.htmlを）へのすべてのリンクを書き換える必要があり、サーバ側でURL書き換えを必要とします。アプリケーションベースであるURLの部分とアプリケーションで処理する必要のあるパスとを区別できるようにするため、タグを必要とすることも重要です。

ngSource

出典

2016-06-28 08:19:34 Bamieh

$ locationProvider.html5Mode（true）を設定した後、また、あなたの文書の<head>に<base>を設定したのですか？

<html> 
    <head> 
    <base href="/"> 
    </head> 
</html>

は、ルックhereの有無：

「行われる必要がある2つのこと

の設定$ locationProvider
相対リンク

のための私達の基本設定があります。

またはhere

出典

2016-06-28 14:10:48 Setily

はい、私は ''を持っていましたが、これはAngularがサイトのすべての ''タグの動作を書き直すのを止めるものではありません。私が言ったように、CMSの標準リンクをクリックすると、例えば、「Home」はAngularを経由しますが、Angularはそのための経路を持たず、リンクをクリックすると何も起こりません。 – qJake

wordpressでangularを使ったときに同様の問題があり、本当に簡単な修正が見つかりました。あなたがしなければならないことは、あなたのコントローラー内のすべての$位置注入を取り除くことだけです。あなたが$ locationサービスを（それを使用するかどうかに関わらず）注入すると、＃動作がハイジャックされます。

これは、すべてのコントローラや指令などを調べて、$ locationサービスがどこにも入れられていないことを確認する必要があることを意味します。

HTH

出典

2016-06-30 14:24:06 utxin

角度の$locationProvider.html5Mode function with it's rewriteLinks設定は、あなたが探しているものです。これは、ブラウザのURLの読み書きに$ locationを使用できるモードに角度を付けるが、リンクのクリックを乗っ取ってAngleのSPAルーティングを誘発することはこれまで試みていない。

例：

$locationProvider.html5Mode({ 
     enabled: true, 
     requireBase: false, 
     rewriteLinks: false 
    });

出典

2016-07-06 12:46:54 Tyson

ドキュメントを見ているうちにそのオプションが表示されませんでした。このオプションを含まないAngularの古いバージョンを使用している可能性があります。奨励金が活発だったとき、あなたはこれに答えるべきでした！ :) – qJake

@qJake Haha、私はちょうど昨晩自分自身でこの問題を抱えていました。あなたと同じ道を歩こうとしていた（角度ソースを編集していた）が、私にこれらのドキュメントを指し示した別の答えが見つかりました。非常に隠され、他にhtml5modeメソッドのdocs内のその小さなコメントとは別にそれを参照するものはありません。それは明らかに1.3以来存在していますが、それについても分かりませんでした。 – Tyson

@qJakeいつでも受け入れられる回答を変更できます;） – Tyson

Angularからhashchangeイベントを削除するか、Angularがアンカーリンクを書き換えないようにします。

答えて

関連リンク

サーバー側

Angularからhashchangeイベントを削除するか、Angularがアンカーリンクを書き換えないようにします。

答えて

関連リンク

サーバー側

関連する問題