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

generates links that are not url encoded if I understand correctly. What is the proper way to encode #/search?query={{address}}?

Example address is 1260 6th Ave, New York, NY.

randomguy
  • 12,042
  • 16
  • 71
  • 101

5 Answers5

111

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)

Tosh
  • 35,955
  • 11
  • 65
  • 55
  • 4
    There seems to be problems with escape, encodeURI and encodeURIComponent (http://stackoverflow.com/a/12796866/377920). I wonder if Angular has some built-in encoding function we can leverage instead. Good answer otherwise. – randomguy Jan 25 '13 at 00:01
  • 2
    This will return `#/search?query=undefined` if `address` is undefined. If that is not what you want see a modified solution below at http://stackoverflow.com/a/31559624/179014 . – asmaier Jul 22 '15 at 09:52
  • @Tosh: isnt there any way to configure it at `$locationProvider` level ? – Shashank Vivek Nov 23 '17 at 17:22
23

@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.

asmaier
  • 11,132
  • 11
  • 76
  • 103
15

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

David Pfeffer
  • 38,869
  • 30
  • 127
  • 202
Ruben Vermeersch
  • 1,933
  • 1
  • 18
  • 27
  • 2
    I reverted this back to the original answer. It was perfectly fine and someone edited it to completely change the intent. – David Pfeffer Dec 11 '14 at 16:01
  • 2
    Why go to the lengths of importing an entire bower module when it is three lines long? A completely unnecessary dependency... – toxaq Nov 04 '17 at 08:23
13

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>
Karlie Verkest De Young
  • 697
  • 8
  • 13
7

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}}"
Jan Tchärmän
  • 957
  • 1
  • 9
  • 13
  • 1
    This is a duplicate of the accepted answer with the unnecessary addition of an extra anonymous function. – toxaq Nov 04 '17 at 08:21