angularjs - 如何使用 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}}">

（更新：适应使用ng-href而不是 plain的 Karlies 的回答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. 将其作为应用程序模块的依赖项引用：

   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}}"