Wie generiere ich URL-codierte Ankerlinks mit AngularJS?

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

generiert Links, die nicht URL-codiert sind, wenn ich das richtig verstehe. Was ist der richtige Weg, um zu codieren #/search?query={{address}}?

Beispieladresse ist 1260 6th Ave, New York, NY.

Sie können das native encodeURIComponentin Javascript verwenden. Sie können es auch zu einem Zeichenfolgenfilter machen, um es zu verwenden.

Hier ist das Beispiel für die Herstellung eines escapeFilters.

js:

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

html:

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

(aktualisiert: Anpassung an Karlies 'Antwort, die ng-hrefstatt einfach verwendet wird href)

Die Lösung von @ Tosh wird zurückgegeben, #/search?query=undefinedwenn sie nicht addressdefiniert ist

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

Wenn Sie stattdessen eine leere Zeichenfolge für Ihre Abfrage erhalten möchten, müssen Sie die Lösung auf erweitern

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

Dies wird zurückgegeben, #/search?query=wenn addresses nicht definiert ist.

Sie können den encodeUri-Filter verwenden: https://github.com/rubenv/angular-encode-uri

1. Fügen Sie Ihrem Projekt angle-encode-uri hinzu:

   bower install --save angular-encode-uri

2. Fügen Sie es Ihrer HTML-Datei hinzu:

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

3. Verweisen Sie darauf als Abhängigkeit für Ihr App-Modul:

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

4. Verwenden Sie es in Ihren Ansichten:

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

Toshs Antwort hat die Filteridee genau richtig. Ich empfehle es einfach so zu machen. Wenn Sie dies tun, sollten Sie jedoch "ng-href" anstelle von "href" verwenden , da das Befolgen von "href" vor dem Auflösen der Bindung zu einem fehlerhaften Link führen kann.

Filter:

'use strict';

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

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

Aussicht:

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

Dies ist ein funktionierendes Codebeispiel:

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

Und in der Vorlage:

<img ng-src="/image.php?url={{item.img_url|urlencode}}"