如何使用AngularJS生成url编码的锚链接？

Question

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

如果我理解正确的话,会生成非url编码的链接.编码的正确方法是#/search?query={{address}}什么？

示例地址是1260 6th Ave, New York, NY.

Answer 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而不是简单的使用href)

Answer 2

#/search?query=undefined如果address未定义,@ Tosh的解决方案将返回

<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未定义,则返回.

Answer 3

您可以使用encodeUri过滤器:https://github.com/rubenv/angular-encode-uri

1. 将angular-encode-uri添加到您的项目中:

   bower install --save angular-encode-uri

2. 将其添加到您的HTML文件:

   <script src="bower_components/angular-encode-uri/dist/angular-encode-uri.min.js"></script>

3. 将其作为app模块的依赖项引用:

   angular.module('myApp', ['rt.encodeuri']);

4. 在您的视图中使用它:

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

Answer 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>

Answer 5

这是一个有效的代码示例:

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

在模板中:

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