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?
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/
ng-hrefinstead of href to be sure that links are rendered by angular before they can be clicked. You should also probably inject $window into the filter instead of using window directly.Reworked @jimr's code, taking into account @aj-richardson's recommendations.
You can use filters within expressions to format data before rendering it.
Create a filter:
var app = angular.module('app', []);
app.filter('encodeURIComponent', function($window) {
return $window.encodeURIComponent;
});
Then apply the filter:
<a ng-href="#/foos/{{foo.id | encodeURIComponent}}">{{foo.name}}</a>
ng-href is used instead of href to be sure that links are rendered by AngularJS before they can be clicked.$window is injected into the filter instead of using window directly.
You should refer to global
windowthrough the$windowservice, so it may be overridden, removed or mocked for testing.
References:
If you want to handle malformed URI error, then you have to write a filter function and then use try-catch around the encodeURIComponent.
var app = angular.module('app', []);
app.filter('encodeURIComponent', function($window) {
return function (path) {
try {
return $window.encodeURIComponent(path);
} catch(e) {
return path;
}
}
});
encodeURIComponentdirectly in the template... Apparently a filter is required.