How can I invoke encodeURIComponent from angularJS template?

Question

I have a block in my angular JS template a la

{{foo.name}}

However, the foo.id property can s

Answer 1

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:

{{foo.name}}

• 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 window through the $window service, so it may be overridden, removed or mocked for testing.

---

References:

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