web-dev-qa-db-ja.com

AngularJSでURLエンコードされたアンカーリンクを生成する方法は？

<a href="#/search?query={{address}}" ng-repeat="address in addresses">
  {{address}}
</a>

正しく理解していれば、URLエンコードされていないリンクを生成します。 #/search?query={{address}}をエンコードする適切な方法は何ですか？

例のアドレスは1260 6th Ave, New York, NYです。

angularjsanchorurlencode
73
randomguy

JavaScriptでネイティブencodeURIComponentを使用できます。また、それを利用するために文字列フィルターにすることができます。

escapeフィルターの作成例を次に示します。

js：

var app = angular.module('app', []);
app.filter('escape', function() {
  return window.encodeURIComponent;
});

html：

<a ng-href="#/search?query={{address | escape}}">

（更新：プレーンhrefの代わりにng-hrefを使用するKarliesの回答に適応します。）

104
Tosh

@Toshのソリューションは、addressが未定義の場合、#/search?query=undefinedを返します。

<a ng-href="#/search?query={{address | escape}}">

クエリの代わりに空の文字列を取得する場合は、ソリューションを拡張する必要があります

var app = angular.module('app', []);
app.filter('escape', function() {
    return function(input) {
        if(input) {
            return window.encodeURIComponent(input); 
        }
        return "";
    }
});

addressが未定義の場合、これは#/search?query=を返します。

21
asmaier

EncodeUriフィルターを使用できます： https://github.com/rubenv/angular-encode-uri

  1. プロジェクトにangle-encode-uriを追加します。

    bower install --save angular-encode-uri

  2. HTMLファイルに追加します。

    <script src="bower_components/angular-encode-uri/dist/angular-encode-uri.min.js"></script>

  3. アプリモジュールの依存関係として参照します。

    angular.module('myApp', ['rt.encodeuri']);

  4. ビューで使用します。

    <a href="#/search?query={{address|encodeUri}}">

14
Ruben Vermeersch

Toshの答えは、フィルターのアイデアを正確に表しています。そのようにすることをお勧めします。ただし、これを行う場合は、"href"ではなく"ng-href"を使用する必要があります。これは、バインディングが解決する前に "href"を追跡すると、結果が悪くなる可能性があるためです。リンク。

フィルタ：

'use strict';

angular.module('myapp.filters.urlEncode', [])

/*
 * Filter for encoding strings for use in URL query strings
 */
.filter('urlEncode', [function() {
  return window.encodeURIComponent;
}]);

見る：

<a ng-href="#/search?query={{ address | urlEncode }}" ng-repeat="address in addresses">
  {{address}}
</a>
12
Karlie Verkest De Young

これは動作するコード例です：

app.filter('urlencode', function() {
  return function(input) {
    return window.encodeURIComponent(input);
  }
});

そしてテンプレートで：

<img ng-src="/image.php?url={{item.img_url|urlencode}}"
6
Jan Tchärmän