Ufdjrw

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 </div>

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

<a ng-href="#!/machineorders/fileupload/ 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