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

【问题标题】：How to generate url encoded anchor links with AngularJS?如何使用 AngularJS 生成 url 编码的锚链接？
【发布时间】：2013-01-08 20:56:21
【问题描述】：

<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

【解决方案1】：

您可以在 javascript 中使用本机 encodeURIComponent。另外，你可以把它做成一个字符串过滤器来使用它。

这里是制作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）

【讨论】：

escape、encodeURI 和 encodeURIComponent (stackoverflow.com/a/12796866/377920) 似乎存在问题。我想知道 Angular 是否有一些我们可以利用的内置编码功能。否则很好回答。
如果 address 未定义，这将返回 #/search?query=undefined。如果这不是您想要的，请在下面查看修改后的解决方案 stackoverflow.com/a/31559624/179014 。
@Tosh: 没有办法在$locationProvider 级别进行配置吗？

【解决方案2】：

您可以使用 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}}">

【讨论】：

我将其恢复为原始答案。非常好，有人对其进行了编辑以完全改变意图。
为什么要导入一个三行长的整个 bower 模块？完全不必要的依赖...

【解决方案3】：

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>

【讨论】：

【解决方案4】：

这是一个工作代码示例：

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

在模板中：

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

【讨论】：

这是已接受答案的副本，没有必要添加额外的匿名函数。

【解决方案5】：

如果address 在中未定义，@Tosh 的解决方案将返回#/search?query=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 "";
    }
});

如果 address 未定义，这将返回 #/search?query=。

【讨论】：

如果输入为0，这将用“”替换它
如果您只想为 undefined 返回一个空字符串，请使用这个 - app.filter('escape', () => (input) => input !== undefined ? window.encodeURIComponent(input) : '');