如何生成与 AngularJS 网址编码锚链接?

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

如果我理解正确,就会生成不是 url 编码的链接。编码 #/search?query={{address}}的正确方法是什么?

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

96396 次浏览

You can use the native encodeURIComponent in javascript. Also, you can make it into a string filter to utilize it.

Here is the example of making escape filter.

js:

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

html:

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

(updated: adapting to Karlies' answer which uses ng-href instead of plain href)

You could use the encodeUri filter: https://github.com/rubenv/angular-encode-uri

  1. Add angular-encode-uri to your project:

    bower install --save angular-encode-uri

  2. Add it to your HTML file:

    <script src="bower_components/angular-encode-uri/dist/angular-encode-uri.min.js"></script>

  3. Reference it as a dependency for your app module:

    angular.module('myApp', ['rt.encodeuri']);

  4. Use it in your views:

    <a href="#/search?query=\{\{address|encodeUri}}">

Tosh's answer has the filter idea exactly right. I recommend do it just like that. However, if you do this, you should use "ng-href" rather than "href", since following the "href" before the binding resolves can result in a bad link.

filter:

'use strict';


angular.module('myapp.filters.urlEncode', [])


/*
* Filter for encoding strings for use in URL query strings
*/
.filter('urlEncode', [function() {
return window.encodeURIComponent;
}]);

view:

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

this is a working code example:

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

And in the template:

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

@Tosh's solution will return #/search?query=undefined if address is undefined in

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

If you prefer to get an empty string instead for your query you have to extend the solution to

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

This will return #/search?query= if address is undefined.