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

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

— 随机人
source

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

（已更新：适应了Karlies的回答，ng-href而不是简单地使用href）

— 胡说
source

4

转义，encodeURI和encodeURIComponent（stackoverflow.com/a/12796866/377920）似乎存在问题。我想知道Angular是否有一些内置的编码功能可以代替我们使用。否则，好的答案。

— randomguy 2013年

2

#/search?query=undefined如果address未定义，将返回。如果那不是您想要的，请在下面的stackoverflow.com/a/31559624/179014上查看经过修改的解决方案。

— 2015年

@Tosh：没有任何方法可以在$locationProvider级别上对其进行配置吗？

— Shashank Vivek

22

#/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未定义，将返回。

— 阿斯迈尔
source

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

— 鲁本·韦尔梅施
source

2

我将其恢复为原始答案。很好，有人对其进行了编辑以完全改变其意图。

— David Pfeffer 2014年

1

当三行长时，为什么要花大量时间导入整个Bower模块？一个完全不必要的依赖...

— toxaq

12

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>

— 卡莉（Karlie Verkest）De Young
source

6

这是一个工作代码示例：

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

并在模板中：

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

— 扬·查尔曼（JanTchärmän）
source

这是已接受答案的重复，并不必要地添加了额外的匿名功能。

— toxaq