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

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

如果我理解正确，将生成未经过url编码的链接。 什么是编码#/search?query={{address}}的正确方法？

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

Answer 1

您可以在JavaScript中使用本机encodeURIComponent 。 此外，你可以把它变成一个stringfilter来利用它。

这里是制作escapefilter的例子。

JS：

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

HTML：

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

（更新：适应卡里斯的答案，使用ng-href而不是普通的href ）

Answer 2

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

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

如果您希望为您的查询获取空string，则必须将解决scheme扩展到

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

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

Answer 3

你可以使用encodeUrifilter： 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

托什的回答有过滤想法完全正确。 我build议就这样做。 但是，如果你这样做，你应该使用“ng-href”而不是“href” ，因为在绑定parsing之前跟着“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}}"