Question

我的角度JS模板中有一个块

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

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

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

但它不起作用？我该如何解决这个问题？

Answer 1

您可以创建一个调用encodeURIComponent

的过滤器

E.g。

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

重写了@jimr的代码，并考虑了@aj-richardson的建议。

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

创建过滤器：

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，因此可能会覆盖，删除或模拟测试。

参考文献：

Answer 3

如果要处理格式错误的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;
        }
    }
});

如何从angularJS模板调用encodeURIComponent？

3 个答案: