Як згенерувати якірні посилання, закодовані за допомогою URL-адреси, за допомогою AngularJS?

75

<a href="#/search?query={{address}}" ng-repeat="address in addresses">
  {{address}}
</a>

генерує посилання, які не закодовані за URL, якщо я правильно розумію. Який правильний спосіб кодування #/search?query={{address}}?

Приклад адреси 1260 6th Ave, New York, NY.

angularjs anchor urlencode

— randomguy
джерело

109

Можна використовувати рідну encodeURIComponent у javascript. Крім того, ви можете перетворити його на рядковий фільтр, щоб використовувати його.

Ось приклад виготовлення escape фільтра.

js:

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

html:

<a ng-href="#/search?query={{address | escape}}">

(оновлено: адаптація до відповіді Карлієс, яка використовує ng-hrefзамість простого href)

— Тош
джерело

4

Там , здається, проблеми з втечею, encodeURI і encodeURIComponent ( stackoverflow.com/a/12796866/377920 ). Цікаво, чи має Angular якусь вбудовану функцію кодування, яку ми можемо використати замість цього. В іншому випадку хороша відповідь.

— randomguy

2

Це повернеться, #/search?query=undefinedякщо addressне визначено. Якщо це не те, що ви хочете, перегляньте модифіковане рішення нижче на stackoverflow.com/a/31559624/179014 .

— asmaier

@Tosh: хіба немає способу налаштувати його на $locationProviderрівні?

— Шашанк Вівек

22

Рішення @ Tosh повернеться, #/search?query=undefinedякщо addressне визначено в

<a ng-href="#/search?query={{address | escape}}">

Якщо ви віддаєте перевагу отримувати порожній рядок замість вашого запиту, вам доведеться розширити рішення

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

Це повернеться, #/search?query=якщо addressне визначено.

— asmaier
джерело

1

Якщо вхідне значення 0, це замінить його на ""

— JeremyWeir

Якщо ви хочете повернути лише порожній рядок для undefinedвикористання цього -app.filter('escape', () => (input) => input !== undefined ? window.encodeURIComponent(input) : '');

— doublesharp

15

Ви можете використати фільтр encodeUri: https://github.com/rubenv/angular-encode-uri

Додайте angular-encode-uri до свого проекту:

bower install --save angular-encode-uri
Додайте його у свій HTML-файл:

<script src="bower_components/angular-encode-uri/dist/angular-encode-uri.min.js"></script>
Посилання на нього як на залежність для вашого модуля програми:

angular.module('myApp', ['rt.encodeuri']);
Використовуйте його у своїх поданнях:

<a href="#/search?query={{address|encodeUri}}">

— Рубен Вермеерш
джерело

2

Я повернув це назад до початкової відповіді. Це було чудово, і хтось відредагував його, щоб повністю змінити намір.

— Девід Пфеффер,

1

Навіщо переходити до довжини імпорту цілого модуля bower, коли він має три рядки? Абсолютно непотрібна залежність ...

— toxaq

12

У відповіді Тоша ідея фільтра є абсолютно правильною. Я рекомендую робити це просто так. Однак, якщо ви зробите це, вам слід використовувати "ng-href", а не "href" , оскільки дотримання "href" перед тим, як вирішення прив'язки може призвести до поганого зв'язку.

фільтр:

'use strict';

angular.module('myapp.filters.urlEncode', [])

/*
 * Filter for encoding strings for use in URL query strings
 */
.filter('urlEncode', [function() {
  return window.encodeURIComponent;
}]);

вид:

<a ng-href="#/search?query={{ address | urlEncode }}" ng-repeat="address in addresses">
  {{address}}
</a>

— Карлі Веркест Де Янг
джерело

6

це приклад робочого коду:

app.filter('urlencode', function() {
  return function(input) {
    return window.encodeURIComponent(input);
  }
});

А в шаблоні:

<img ng-src="/image.php?url={{item.img_url|urlencode}}"

— Ян Терман
джерело

Це дублікат прийнятої відповіді з непотрібним додаванням додаткової анонімної функції.

— toxaq