Làm thế nào tôi có thể gọi encodeURIComponent từ mẫu angularJS?

Question

Tôi có một khối trong mẫu JS góc của tôi a la

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

Tuy nhiên, tài sản foo.id đôi khi có thể chứa các ký tự funky ('/'). Tôi muốn làm một cái gì đó như thế này:

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

nhưng nó không hoạt động? Làm thế nào tôi có thể sửa lỗi này?

Answer 1

Bạn có thể tạo bộ lọc gọi encodeURIComponent

Ví dụ:

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

Sau đó làm

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

Chạy ví dụ: http://jsfiddle.net/YApdK/

Answer 2

làm lại @jimr 'mã s, có tính đến @aj-richardson' s khuyến nghị.

Bạn có thể sử dụng bộ lọc trong biểu thức để định dạng dữ liệu trước khi hiển thị.

Tạo một bộ lọc:

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

Sau đó áp dụng bộ lọc:

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

• ng-href được sử dụng thay vì href để chắc chắn rằng các liên kết được đưa ra bởi AngularJS trước khi chúng có thể được nhấp vào.
• $window được đưa vào bộ lọc thay vì sử dụng trực tiếp window.

  Bạn nên tham khảo toàn cầu window thông qua dịch vụ $window, để có thể bị ghi đè, xóa hoặc giả mạo để thử nghiệm.

---

Tài liệu tham khảo:

1. AngularJS API: $window
2. AngularJS Developer Guide: filters
3. AngularJS Developer Guide: expressions