带有encodeURIComponent的AngularJS过滤器在链接中不起作用

Question

我正在尝试使用调用encodeURIComponent的过滤器对URL中传递的值进行编码。

我原来的过滤器

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

基于这篇文章

How can I invoke encodeURIComponent from angularJS template?

当这不起作用时，我尝试了其他建议并注入$ window，将其包装在另一个函数中，并将href更改为ng-href。原始版本和此新版本均返回相同的输出。

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

如果这样做，我可以在控制台中看到预期的编码值。

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

console output

我可以像这样绑定它，结果是编码值。

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

但是，当我放入href或ng-href时，该值未编码。

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

“ Japan / Singapore PO”的值应为Japan％2FSingapore％20PO，但未更改。

screenshot of url

任何帮助或建议，将不胜感激。

---

对于MikeS在jsfiddle中悬停时显示编码的url screenshot of jsfiddle