Как я могу вызвать encodeURIComponent из шаблона angularJS?

У меня есть блок в шаблоне JS angular a la

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

Однако свойство foo.id иногда может содержать фанки-символы ('/'). Я хочу сделать что-то вроде этого:

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

но он не работает? Как я могу это исправить?

Ответ 1

Вы можете создать фильтр, который вызывает encodeURIComponent

например.

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

Тогда do

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

Пример выполнения: http://jsfiddle.net/YApdK/

Ответ 2

Переработан код @jimr с учетом рекомендаций @aj-richardson.

Вы можете использовать фильтры в выражениях для форматирования данных перед их отображением.

Создать фильтр:

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

Затем примените фильтр:

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

ng-href используется вместо href чтобы убедиться, что AngularJS отрисовывает ссылки перед тем, как их можно будет щелкнуть.
$window вводится в фильтр вместо непосредственного использования window.

Вы должны обращаться к глобальному window через службу $window, чтобы его можно было переопределить, удалить или смоделировать для тестирования.

Рекомендации:

Ответ 3

Если вы хотите обработать некорректную ошибку URI, вам нужно написать функцию фильтра, а затем использовать try-catch вокруг encodeURIComponent.

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