0

I am trying to encode a value passed in an URL using a filter that calls encodeURIComponent.

My original filter

angular.
    module('machineorderDetail').
    filter('encodeURIComponent', function () {
        return window.encodeURIComponent;
    }).

was based on this post

How can I invoke encodeURIComponent from angularJS template?

When this didn't work I tried some other suggestions and injected $window, wrapped it in another function and changed href to ng-href. Both the original version and this new version return the same output.

angular.
    module('machineorderDetail').
    filter('encodeURIComponent', ['$window', function ($window) {
        return function (input) {
            return encodeURIComponent(input);
        };
    }]).

If I do this I can see the encoded value as expected in the console out. 

angular.
    module('machineorderDetail').
    filter('encodeURIComponent', ['$window', function ($window) {
        return function (input) {
            var retVal = encodeURIComponent(input);
            console.log(retVal);
            return retVal;
        };
  }]).

console output

I can bind it like this the result is the encoded value.

<div>{{MachineOrderFile.DocumentName | encodeURIComponent}}</div>

However when I put in in either an href or an ng-href the value is not encoded.

<a ng-href="#!/machineorders/fileupload/{{fileProfile.DocumentName | encodeURIComponent}}/{{$ctrl.machineorder.MachineOrderHeader.ID}}">

The value "Japan/Singapore PO" should be Japan%2FSingapore%20PO but it is unchanged.

screenshot of url

Any help or suggestions would be greatly appreciated.

For MikeS showing encoded url when hovering in you jsfiddle screenshot of jsfiddle

markcee
  • 5
  • 3
  • When you click on the link is it not encoded? When you hover over a link as in your screenshot the browser will decode the URL. For example if you hover over the link in this example http://jsfiddle.net/oe2mbrpy/ its decoded, but clicking it shows correctly in the address bar – MikeS Mar 06 '19 at 15:31
  • Correct, when I click on the link it is not encoded. Also neither Chrome or FireFox is decoding the URL on hover. When I hover on the link in the jsfiddle it is encoded, for what it's worth. Added screenshot to my post to show hovering in your jsfiddle. – markcee Mar 06 '19 at 16:27
  • It looks to me as if you are using Angular and not AngularJS (an earlier version of Angular). If this is the case then filters arent available, I dont know Angular as much but its likley pipes you want to look at https://angular.io/guide/pipes – MikeS Mar 06 '19 at 17:01

0 Answers0