javascript - 如何从 angularJS 模板调用 encodeURIComponent？

Question

我的 Angular JS 模板中有一个块

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

但是，foo.id 属性有时可能包含时髦的字符 ('/')。我想做这样的事情：

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

但它不起作用？我怎样才能解决这个问题？

Answer 1

您可以创建一个过滤器来调用encodeURIComponent

例如

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

然后做

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

运行示例：http: //jsfiddle.net/YApdK/

Answer 2

考虑到@aj-richardson的建议，重新设计了@jimr的代码。

您可以在表达式中使用过滤器在呈现数据之前对其进行格式化。

创建过滤器：

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您应该通过服务引用全局$window，因此它可能会被覆盖、删除或模拟以进行测试。

---

参考：

1. AngularJS API：$ 窗口
2. AngularJS 开发者指南：过滤器
3. AngularJS 开发者指南：表达式

Answer 3

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

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