CODEWITHSUNDEEP
angularjsasp.net-mvcencodeuricomponentangularjs-ng-href
markcee
markcee

Reputation: 5

AngularJS Filter with encodeURIComponent Not Working in Link

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

Upvotes: 0

Views: 399

Answers (0)

Related Questions