Angular Resource Encoding URL

Question

I have a resource defined as follows:

app.factory("DatumItem", function($resource) {
    return $resource('/data/:id', {id: '@id'});
});

In my view I have:

<div ng-click="go('/datum/' + d.to_param)">Test</div>

where go() is defined in my controller as:

$scope.go = function (params) {
    $location.path(params);
};

For the item in question, d.param is equal to

TkZUOWZwcnc9Uldo%0ASzRvd2FiWk

But when I call DatumItem.get() with the correct ID, it is changing the id to

TkZUOWZwcnc9Uldo%250ASzRvd2FiWk

Is there a way to prevent the % from being encoded to a %25 in this case?

I've tried a combination of using encodeURI, encodeURIComponent to no avail.

any help would be greatly appreciated, thanks!

Answer 1

Since the URL is already URIencoded you need to decode it before passing it to angular:

$scope.go = function (params) {
    $location.path(decodeURIComponent(params));
};

Answer 2

you can also use unescape instead of decodeURIComponent.

Refer below code snippet -

$scope.go = function (params) {
    $location.path(unescape(params));
};

Answer 3

I have created a filter in angularJs project to decode the URL. For example if your URL is- http://www.example.com/test1 test2 tes3

Then filter make the URL like this- http://www.example.com/test1-test2-tes3

in my angular project the main app name is angularApp.

var app = angular.module('angularApp', []);// This is your main angular app.

Now you want to create a filter for decode url.

app.filter('decodeURL', function() {
    return function(text) {
        if(text) {
            return text.split(' ').join('-').toLowerCase().replace(/[^a-z0-9]+/g, '-');
        }
    }
});

The above code is to create a filter to decode url. And my filter name is 'decodeURL' . we will use decodeURL as a filter in my code

How to use this filter in the html-

<a ui-sref="{{business.category[0].categoryName.toLowerCase()}}Detail({id:business.id,title:(business.title | decodeURL)})"></a>

// The above is for state routing in angularjs.

<a href="/coupon/{{coupon.id}}/{{coupon.title | decodeURL}}"
                                       class="btn btn-warning show-btnhome show-button-margin">Show</a>

//The above code for URL redirecting.