web-dev-qa-db-ja.com

angleJSパーシャル内から異なるドメインの外部URLへのリンク

私がやろうとしているのは、外部サイトにリンクするパーシャルのhtml内にアンカータグを含めることだけです。この標準のhtmlの場合、コードは次のようになります。

<a href="http://www.google.com" target="_blank">google</a>

これは単純ですが、angularルートをインターセプトする(またはアンカーを https://docs.angularjs)に置き換える)ための実用的な解決策を見つけることができないようです。 org/api/ng/directive/a 意図せずにディレクティブ?)。

私はSOとウェブの残りの部分を精査し、同じドメイン内のリンク、SPA内のルーティング、ページ内のルーティング(ala $ anchorScroll)を処理するための無数のソリューションを見てきましたがこれらのどれも私の問題ではありません。

$ sceの使用に関係があるのではないかと思いますが、私はAngular n00bであり、そのサービスを適切に使用する方法がよくわかりません。ビューコントローラーで次のことを試しました。

$scope.trustUrl = function(url) {
    return $sce.trustAsResourceUrl(url);
}

対応する:

<a ng-href="{{ trustUrl(item) }}">Click me!</a>

(ここで説明されているように: angularjsテンプレートで外部URLをバインドする

しかし、それではうまくいかなかったようです(レンダリングされたページにhref = "{{"だけが表示されました)。

このようなプレーンなバニラアンカーリンクを使用する:

<a href="http://www.google.com">google</a>

また、トリックを実行できませんでした(一部のオンラインでは、標準のhrefによってAngularでページが完全にリロードされるとアドバイスされていましたが: AngularJS-ページ全体をロードしてリダイレクトするにはどうすればよいですか? )。

Target = _self "属性も追加してみましたが、効果がないようです。

ここで説明するようにカスタムディレクティブを作成する必要がありますか?

条件付きでtarget = "_blank"をAngular JS のリンクに追加します

これはすべて、このような単純なアクションには複雑すぎるように思われ、n00bishnessに明らかな何かが欠けているように感じます。少なくとも、このプロセスは別のURLにリンクするだけで非常に面倒なので、そう願っています。

解決策、アドバイス、参照、または指示を事前に感謝します。

7
taoteg

実際、ページ内のすべてのアンカーリンクがイベントリスナーにバインドされ、オーバーライドされていることがわかりました。そのコードはページが機能する方法の基本だったので、私はそれを台無しにしたくありませんでした。代わりに、ng-clickを使用して次のように新しいURLを呼び出すことでバイパスしました。

HTML:

<a class="navLinkHcp" href="{{hcpurl}}" title="Habitat Conservation Plan" target="_blank" ng-click="linkModelFunc(hcpurl)">Habitat Conservation Plan</a>

コントローラ:

$scope.hcpurl = 'http://eahcp.org/index.php/about_eahcp/covered_species';

$scope.linkModelFunc = function (url){
  console.log('link model function');
  $window.open(url);
}

そして出来上がり!行ってもいい。これがおそらく問題であったという点で私を手がかりにしてくれたKevinBにもう一度感謝します。

7
taoteg