Как сгенерировать URL-ссылки с привязкой к url ​​с помощью AngularJS?

Ответ 1

Вы можете использовать собственный encodeURIComponent в javascript. Кроме того, вы можете сделать это в фильтр строк, чтобы использовать его.

Вот пример создания фильтра escape.

JS:

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

HTML:

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

(обновлено: адаптация к ответу Karlies, который использует ng-href вместо plain href)

Ответ 2

Решение @Tosh вернет #/search?query=undefined, если address - undefined в

<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 - undefined.

Ответ 3

Вы можете использовать фильтр 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}}">

Ответ 4

Ответ на Tosh имеет идею фильтра точно вправо. Я рекомендую сделать это просто так. Однако, если вы это сделаете, вы должны использовать "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>

Ответ 5

это пример рабочего кода:

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

И в шаблоне:

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