Wie URL-codierte Anker-Links mit AngularJS generieren?

Question

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

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

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

Answer 1

Sie können die native in Javascript verwenden. Sie können es auch zu einem String-Filter machen, um es zu nutzen.

Hier ist das Beispiel der Herstellung escape Filter.

js:

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

html:

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

(aktualisiert: bis Karlies' Antwort Anpassung der ng-href anstelle von einfachen href verwendet)

Answer 2

Sie die encodeURI Filter verwenden: https://github.com/rubenv/angular-encode-uri

1. hinzufügen Winkel encodieren-uri zu einem Projekt:

   bower install --save angular-encode-uri

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

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

3. Referenz es als eine Abhängigkeit für Ihre App-Modul:

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

4. es in Ihren Ansichten verwenden:

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

Answer 3

Toshs Antwort hat die Filter Idee genau richtig. Ich empfehle es einfach so. Wenn Sie dies tun, sollten Sie jedoch "ng-href" statt "href" verwenden, da das Folgen der "href" vor der Bindung zu einer schlechten Verbindung 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; 
}]); 

Ansicht:

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

Answer 4

dies ein Arbeitscodebeispiel ist:

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

Answer 5

@ Lösung Toshs kehrt #/search?query=undefined wenn address undefiniert in

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

Wenn Sie es vorziehen, eine leere Zeichenfolge stattdessen für Ihre Abfrage erhalten Sie die Lösung für

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

Diese zurückkehren #/search?query= zu verlängern haben wenn address nicht definiert ist.