Javascript 如何从angularJS模板调用encodeURIComponent？

我的angular JS模板a la中有一个块

<a href="#/foos/{{foo.id}}">{{foo.name}}</a>

但是，foo.id属性有时可能包含时髦的字符（“/”）。我想这样做：

<a href="#/foos/{{encodeURIComponent(foo.id)}}">{{foo.name}}</a>

---

但它不起作用？如何解决此问题？

您可以创建一个调用

encodeURIComponent

例如

那就做吧

<a href="#/foos/{{foo.id | encodeURIComponent}}">{{foo.name}}</a>

运行示例：

重新编写的代码，考虑了的建议

在呈现数据之前，可以在表达式中使用过滤器格式化数据

创建一个过滤器：

var app = angular.module('app', []);
app.filter('encodeURIComponent', function($window) {
    return $window.encodeURIComponent;
});

然后应用过滤器：

<a ng-href="#/foos/{{foo.id | encodeURIComponent}}">{{foo.name}}</a>

• 使用

  ng href

  代替

  href

  ，以确保链接在单击之前由AngularJS呈现

• $window

  被注入过滤器，而不是直接使用

  window

  。 您应该通过

  $window

  服务来参考全局

  窗口

  ，因此它可能会被覆盖、删除或模拟以进行测试

---

参考资料：

---

如果要处理格式错误的URI错误，则必须编写一个筛选函数，然后在

encodeURIComponent

中使用try-catch

var app = angular.module('app', []);
app.filter('encodeURIComponent', function($window) {
    return function (path) {
        try {
            return $window.encodeURIComponent(path);
        } catch(e) {
            return path;
        }
    }
});

---

jimr打败了我，但也值得注意的是，你应该使用ng href而不是href，以确保链接在被点击之前由angular呈现。仅仅使用一个函数感觉是错误的，但它立即起作用。感谢，非常令人印象深刻的示例，通过一个非常短的syntaxAs@RickJolly指出，您应该使用

ng href

而不是

href

，以确保在单击链接之前，链接是按角度渲染的。您可能还应该将

$window

注入到过滤器中，而不是直接使用

window

。我看到了这个答案——我想知道——为什么我不能在模板中直接使用

encodeURIComponent

。。。显然需要一个过滤器。

var app = angular.module('app', []);
app.filter('encodeURIComponent', function($window) {
    return function (path) {
        try {
            return $window.encodeURIComponent(path);
        } catch(e) {
            return path;
        }
    }
});