How can I invoke encodeURIComponent from angularJS template?

Question

I have a block in my angular JS template a la

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

However, the foo.id property can sometimes contain funky characters ('/'). I want to do something like this:

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

but it doens't work? How can I fix this?

Answer 1

You could create a filter that calls encodeURIComponent

E.g.

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

Then do

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

Running example: http://jsfiddle.net/YApdK/