Come posso richiamare encodeURIComponent dal modello angularJS?

Question

Ho un blocco nel mio angolare modello JS alla

<a href="#/foos/{{foo.id}}">{{foo.name}}</a> 

Tuttavia, la proprietà foo.id a volte può contenere caratteri funky ('/'). Voglio fare qualcosa di simile:

<a href="#/foos/{{encodeURIComponent(foo.id)}}">{{foo.name}}</a> 

ma non funziona? Come posso risolvere questo?

Answer 1

Si potrebbe creare un filtro che chiama encodeURIComponent

Ad es

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

Poi fanno

<a href="#/foos/{{foo.id | encodeURIComponent}}">{{foo.name}}</a> 

esempio di Esecuzione: http://jsfiddle.net/YApdK/

Answer 2

rielaborato @jimr 'codice di s, tenendo conto @aj-richardson' s raccomandazioni.

È possibile utilizzare i filtri all'interno delle espressioni per formattare i dati prima di renderli.

creare un filtro:

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

Poi applicare il filtro:

<a ng-href="#/foos/{{foo.id | encodeURIComponent}}">{{foo.name}}</a> 

• ng-href è usato al posto di href per essere sicuri che i collegamenti sono resi da AngularJS prima di poter essere cliccato.
• $window viene iniettato nel filtro invece di utilizzare direttamente window.

  È necessario fare riferimento al numero globale window tramite il servizio $window, in modo che possa essere sottoposto a override, rimosso o deriso per il test.

---

Riferimenti:

1. AngularJS API: $window
2. AngularJS Developer Guide: filters
3. AngularJS Developer Guide: expressions