web-dev-qa-db-ja.com

絶対URLでng-hrefを使用する方法

私はまだangularjsを使い始めていませんが、解決策を見つけることができないようで、angularソースを調べる時間がないので問題があります。

これは私のシナリオです：

画面に表示したいURLのコレクションを含むいくつかのjsonデータがあります。 ng-repeat="link in links"の要素があり、内部には

<a ng-href="{{link.url}}">{{link.title}}</a>

それは機能しますが、すべてのリンクがmydomain/apppath /valueoflink.titleを指しています。 valueoflink.title接頭辞なし。

angularそれが絶対的な相対URLではないことをどのように伝えるか？

angularjsangularjs-directiveangularjs-ng-href
15
Goran Obradovic

私はjsonのデータの前に「http：//」を付けて完全に絶対的なURLにすることでそれを解決し、angularjsはそれを尊重します。

次に、angularは実際に値を使用して何も実行せず、そのままそこに配置するだけであることがわかりました。それを確認するのは私の責任です。

コードをこれに更新すると、すべてのURLが「www.google.com」のような場合の問題が解決します

<a ng-href="http://{{link.url}}">{{link.title}}</a>

プレーンな古い「要素の検査」で問題が明らかになり、ng-hrefが{{value}}構文からバインドするという事実を無視したので、これがng-href="'http://'+{{value}}"失敗し、時期尚早に質問するようになりましたが、そのような間違いを犯しているのは私だけではない可能性があるため、削除する必要があるかどうかはわかりません。

14
Goran Obradovic

Goranが言ったように、彼のソリューションはすべてのURLが「www.google.com」のような場合にのみ機能します。

異なるタイプのURLの組み合わせがある場合、たとえば「www.google.com」、「 https://github.com 」、「 http://goo.gl 」、「github.com」、次のことができますangularフィルターでng-hrefを使用します：

<a ng-href="{{link.url|myFilter}}">{{link.title}}</a>

そして、「www」で始まる場合、URLに「http：//」を追加するフィルター：

'use strict';
myApp.filter("myFilter", function () {
return function (link) {
    var result;
    var startingUrl = "http://";
    var httpsStartingUrl = "https://"; 
    if(link.startWith(startingUrl)||link.startWith(httpsStartingUrl)){
        result = link;
    }
    else {
    result = startingUrl + link;
    }
    return result;
}
});
String.prototype.startWith = function (str) {
return this.indexOf(str) == 0;
};
18
Tonven

外部URLを使用するだけでは、フィルターは複雑すぎます。以下は、私のウェブサイト、youtiming.comでYahoo!にアクセスするために使用したスニペットです。 AMZNなどのティッカーに関するファイナンスニュース（ticker.tick.nameに保存）。 「ticker」は、ng-repeatからのループ変数、「ng-repeat = 'ticker in portf.tickers'」です。

<div ng-if="ticker.tick.name">
  <a href="http://finance.yahoo.com/quote/{{::ticker.tick.name}}/news?p={{::ticker.tick.name}}">{{::ticker.tick.name}} News from Yahoo! Finance</a>
</div>

Ng-hrefドキュメント（ https://docs.angularjs.org/api/ng/directive/ngHref ）によると、ng-hrefを使用する理由は、「Angular href属性の{{hash}}のようなマークアップは、ユーザーがAngularの前にクリックすると、{{hash}を置き換える機会がある場合、リンクが間違ったURLに移動するようにします}の値でマークアップします。 "、したがって、パフォーマンス上の理由から" :: "による双方向のデータバインディングをオフにしながら副作用を停止するには、最初にticker.tick.nameが使用可能かどうかをng-ifします。はいの場合、URLを作成します。それ以外の場合、コードは使用可能になるまで保持されます。

Ticker.tick.nameが利用可能になるまでにかなりの時間がかかる場合は、フロントエンドから複雑なソリューションを提供するのではなく、RESTfulサービスの呼び出し遅延またはネットワークトラフィックを確認する必要があります。

0
Daniel C. Deng