Come generare collegamenti di ancoraggio con codifica url con AngularJS?

Question

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

genera collegamenti che non sono codificati in url se ho capito bene. Qual è il modo corretto di codificare #/search?query={{address}}?

L'indirizzo di esempio è 1260 6th Ave, New York, NY.

Answer 1

È possibile utilizzare il codice nativo encodeURIComponent in javascript. Inoltre, è possibile trasformarlo in un filtro stringa per utilizzarlo.

Ecco l'esempio del filtro escape.

JS:

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

html:

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

(aggiornato: adattandosi alla risposta Karlies' che utilizza ng-href invece del semplice href)

Answer 2

Si potrebbe utilizzare il filtro encodeURI: https://github.com/rubenv/angular-encode-uri

1. Aggiungere angolare-encode-uri al progetto:

   bower install --save angular-encode-uri

2. aggiungerlo al tuo file HTML:

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

3. di riferimento come una dipendenza per il modulo app:

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

4. Usalo in vostro punto di vista: la risposta

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

Answer 3

di Tosh ha l'idea del filtro esattamente a destra. Raccomando di farlo proprio così. Tuttavia, se si esegue questa operazione, è necessario utilizzare "ng-href" anziché "href", poiché seguire "href" prima che le risoluzioni di associazione possano causare un collegamento errato.

filtro:

'use strict'; 

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

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

vista:

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

Answer 4

questo è un esempio di codice di lavoro:

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

E nel modello:

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

Answer 5

@ La soluzione di Tosh tornerà #/search?query=undefined se address non è definito in

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

Se si preferisce ottenere una stringa vuota, invece, per la query è necessario estendere la soluzione a

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

Ciò restituirà #/search?query= se address non è definito.