Wie generiere ich URL-codierte Ankerlinks mit AngularJS?

75

<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.

angularjs anchor urlencode

— zufälliger Typ
quelle

109

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)

— Tosh
quelle

4

Es scheint Probleme mit Escape, encodeURI und encodeURIComponent zu geben ( stackoverflow.com/a/12796866/377920 ). Ich frage mich, ob Angular eine integrierte Codierungsfunktion hat, die wir stattdessen nutzen können. Ansonsten gute Antwort.

— Randomguy

2

Dies wird zurückgegeben, #/search?query=undefinedwenn addresses nicht definiert ist. Wenn dies nicht der Fall ist, finden Sie unten eine modifizierte Lösung unter stackoverflow.com/a/31559624/179014 .

— Asmaier

@Tosh: Gibt es keine Möglichkeit, es auf $locationProviderEbene zu konfigurieren ?

— Shashank Vivek

22

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.

— Asmaier
quelle

1

Wenn die Eingabe 0 ist, wird sie durch "" ersetzt

— JeremyWeir

Wenn Sie nur eine leere Zeichenfolge zurückgeben möchten, undefinedverwenden Sie diese -app.filter('escape', () => (input) => input !== undefined ? window.encodeURIComponent(input) : '');

— doublesharp

15

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

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

bower install --save angular-encode-uri
Fügen Sie es Ihrer HTML-Datei hinzu:

<script src="bower_components/angular-encode-uri/dist/angular-encode-uri.min.js"></script>
Verweisen Sie darauf als Abhängigkeit für Ihr App-Modul:

angular.module('myApp', ['rt.encodeuri']);
Verwenden Sie es in Ihren Ansichten:

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

— Ruben Vermeersch
quelle

2

Ich habe dies auf die ursprüngliche Antwort zurückgesetzt. Es war vollkommen in Ordnung und jemand hat es bearbeitet, um die Absicht vollständig zu ändern.

— David Pfeffer

1

Warum ein ganzes Laubenmodul importieren, wenn es drei Zeilen lang ist? Eine völlig unnötige Abhängigkeit ...

— Toxaq

12

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>

— Karlie Verkest De Young
quelle

6

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}}"

— Jan Tchärmän
quelle

Dies ist ein Duplikat der akzeptierten Antwort mit dem unnötigen Hinzufügen einer zusätzlichen anonymen Funktion.

— Toxaq