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;
};
}]).
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.
Any help or suggestions would be greatly appreciated.
For MikeS showing encoded url when hovering in you jsfiddle screenshot of jsfiddle
