Jak generować zakotwiczone linki zakotwiczone za pomocą AngularJS?

Question

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

generuje linki, które nie są zakodowane w adresie URL, jeśli rozumiem je poprawnie. Jaki jest właściwy sposób kodowania #/search?query={{address}}?

Przykładowy adres to 1260 6th Ave, New York, NY.

Answer 1

Możesz użyć natywnego encodeURIComponent w javascript. Można również użyć go do filtrowania ciągów znaków, aby go wykorzystać.

Oto przykład wykonania filtra escape.

JS:

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

html:

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

(aktualizacja: przystosowanie do odpowiedzi Karlies' który wykorzystuje ng-href zamiast zwykłego href)

Answer 2

można użyć filtra encodeURI: https://github.com/rubenv/angular-encode-uri

1. Dodaj kątową zakodować-URI do projektu:

   bower install --save angular-encode-uri

2. go dodać do pliku HTML:

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

3. Reference go jako zależność dla modułu aplikacji:

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

4. Użyj go w widokach: odpowiedź

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

Answer 3

Tosh zawiera ideę dokładnie odpowiedni filtr. Polecam zrobić to tak po prostu. Jednakże, jeśli to zrobisz, powinieneś użyć "ng-href" zamiast "href", ponieważ podążanie za "hrefem" przed rozstrzygnięciem wiązania może skutkować błędnym łączem.

filtr:

'use strict'; 

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

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

widok:

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

Answer 4

to przykład kod roboczych:

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

I w szablonie:

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

Answer 5

@ rozwiązania Tosh powróci #/search?query=undefined jeśli address jest niezdefiniowane w

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

Jeśli wolisz, aby uzyskać ciąg pusty zamiast dla zapytania trzeba rozszerzyć rozwiązanie

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

Spowoduje to powrót #/search?query= jeśli address jest niezdefiniowany.