53

HTML5モードが有効になっているAngular.jsアプリが動作しています。

$location.Html5mode(true).hashbang("!");

私が達成したいのは<a>、HTML5履歴APIを使用してアドレスバーのURLを変更し、Angularコントローラーを使用して処理する代わりに、いくつかのURLまたはタグを取得して通常のブラウジング動作を実行することです。

私はこのリンクを持っています：

<a href='/auth/facebook'>Sign in with Facebook</a>
<a href='/auth/twitter'>Sign in with Twitter</a>
<a href='/auth/...'>Sign in with ...</a>

そして、ブラウザがユーザーをリダイレクトし/auth/...て、ユーザーが認証サービスにリダイレクトされるようにします。

これを行う方法はありますか？

4

7 に答える 7

120

target="_self"Angular 1.0.1での作品の追加：

<a target="_self" href='/auth/facebook'>Sign in with Facebook</a>

この機能は文書化されています（https://docs.angularjs.org/guide/$location-'_self 'を検索してください）

興味がある場合は、角度ソース（5365 @ v1.0.1行）を確認してください。クリックハイジャックは、!elm.attr('target')がtrueの場合にのみ発生します。

于 2012-08-08T04:56:28.943 に答える
20

Fran6coの方法の代わりに、$locationProviderの「rewriteLinks」オプションを無効にすることもできます。

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

これは、$ rootElement.off（'click'）を呼び出すのとまったく同じことを実行しますが、アプリのルート要素でクリックイベントを処理する他のJavaScriptに干渉することはありません。

ドキュメント、および関連するソースを参照してください

于 2015-02-19T03:18:24.597 に答える
16

これは、ディープリンクをすべてオフにするためのコードです。rootElementからのクリックイベントハンドラーを無効にします。

angular.module('myApp', [])
   .run(['$location', '$rootElement', function ($location, $rootElement) {
      $rootElement.off('click');
}]);
于 2012-08-02T20:26:10.830 に答える
2

Nikの答えを解決するために、リンクがたくさんあり、それぞれにターゲットを追加したくない場合は、ディレクティブを使用できます。

Module.directive('a', function () {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            element.attr("target", "_self");
        }
    };
});
于 2014-09-10T18:22:08.227 に答える
1

私はAngularで同じ問題に何度か遭遇しました。2つの機能的な解決策を考え出しましたが、どちらもハックのように感じ、あまり「Angular」ではありません。

ハック＃1：

window.locationリンクのclickイベントに更新をバインドします。

<a 
  href=/external/link.html 
  onclick="window.location = 'http://example.com/external/link.html';"
>

このアプローチの欠点と問題はかなり明白です。

ハック＃2

$route変更を実行するAngularを設定します$window.location。

// Route
.when('/external', {
  templateUrl: 'path/to/dummy/template', 
  controller: 'external'
})

// Controller
.controller('external', ['$window', function ($window) {
  $window.location = 'http://www.google.com';
}])

またはクエリ文字列を使用してこれを拡張し、$routeParams1つのコントローラーですべての「外部」リンクを処理できると思います。

私が言ったように、これらの解決策はどちらも非常に満足のいくものではありませんが、短期的にこれを機能させる必要がある場合は、それらが役立つ可能性があります。

rel=externalちなみに、jQueryMobileがajaxページの読み込みを無効にするために使用するのと同じように、このタイプの機能に対するAngularのサポートを本当に望んでいます。

于 2012-07-20T15:39:56.757 に答える
0

あなたのルートで試してみてください：

$routeProvider.otherwise({})

于 2012-07-20T20:57:06.650 に答える
0

Dragonflyの答えに追加するために、target = "_ self"属性の数を制限するために私が見つけたベストプラクティスは、bodyタグにng-app属性を決して置かないことです。そうすることで、bodyタグ内のすべてがAngularアプリの一部であることをAngularに伝えています。

角度の影響を受けてはならない静的ラッパー内で作業している場合は、角度アプリが機能する場所のみを囲むdiv（または他の要素）にng-app属性を配置します。この方法では、 ng-app要素の子となるリンクにtarget='_self'属性を配置する必要があります。

<body>
    ... top markup ...
    <div ng-app="myApp">
        <div ng-view></div>
    </div>
    ... bottom markup ...
</body>
于 2014-10-14T23:00:47.730 に答える