Comment puis-je invoquer encodeURIComponent à partir du modèle angularJS?

J'ai un bloc dans mon modèle JS angulaire a la

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

Cependant, la propriété foo.id peut parfois contenir des caractères géniaux ('/'). Je veux faire quelque chose comme ça:

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

Mais ça ne fonctionne pas? Comment puis-je réparer cela?

Vous pouvez créer un filtre qui appelle encodeURIComponent

Par exemple

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

Alors fais

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

Exemple de fonctionnement: http://jsfiddle.net/YApdK/

Le code de @jimr retravaillé, en tenant compte des recommandations de @ aj-richardson .

Vous pouvez utiliser des filtres dans les expressions pour formater les données avant de les rendre.

Créer un filtre:

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

Ensuite, appliquez le filtre:

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

ng-href est utilisé à la place de href pour s'assurer que les liens sont rendus par AngularJS avant qu'ils ne soient cliqués.
$window est injectée dans le filtre au lieu d'utiliser directement la window .

Vous devez vous référer à la window globale via le service $window , donc il peut être remplacé, supprimé ou simulé pour le test.

Les références: