Question

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

如果我理解正确的话，

会生成不经过网址编码的链接。编码#/search?query={{address}}的正确方法是什么？

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

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

（已更新：适应使用ng-href代替普通href的凯拉斯答案）

Answer 2

如果#/search?query=undefined未定义

，@ Tosh的解决方案将返回address

<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

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

Answer 4

Tosh的回答让过滤器的想法完全正确。我建议就这样做。但是，如果你这样做，你应该使用＆＃34; ng-href＆＃34; 而不是＆＃34; href＆＃34; ，因为关注＆＃ 34; HREF＆＃34;在绑定结束之前可能会导致链接错误。

过滤器：

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

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

5 个答案: