Làm cách nào để tạo liên kết anchor được mã hóa url bằng AngularJS?

Question

<a href="#/search?query={{address}}" ng-repeat="address in addresses"> 
    {{address}} 
</a> 

tạo liên kết không được mã hóa url nếu tôi hiểu chính xác. Cách thích hợp để mã hóa #/search?query={{address}} là gì?

Địa chỉ mẫu là 1260 6th Ave, New York, NY.

Answer 1

Bạn có thể sử dụng mã gốc encodeURIComponent trong javascript. Ngoài ra, bạn có thể biến nó thành bộ lọc chuỗi để sử dụng nó.

Dưới đây là ví dụ về cách tạo bộ lọc escape.

js:

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

html:

<a ng-href="#/search?query={{address | escape}}"> 

(Cập nhật: thích nghi với Karlies' câu trả lời trong đó sử dụng ng-href thay vì đơn giản href)

Answer 2

Bạn có thể sử dụng bộ lọc encodeUri: https://github.com/rubenv/angular-encode-uri

1. Thêm góc mã hóa-uri để dự án của bạn:

   bower install --save angular-encode-uri

2. Thêm nó vào tập tin HTML của bạn:

   <script src="bower_components/angular-encode-uri/dist/angular-encode-uri.min.js"></script>

3. tham khảo nó như là một sự phụ thuộc cho module ứng dụng của bạn:

   angular.module('myApp', ['rt.encodeuri']);

4. Sử dụng nó trong quan điểm của bạn: Câu trả lời

   <a href="#/search?query={{address|encodeUri}}">

Answer 3

Tosh vừa thể hiện ý tưởng bộ lọc hoàn toàn đúng. Tôi khuyên bạn nên làm như thế. Tuy nhiên, nếu bạn làm điều này, bạn nên sử dụng "ng-href" thay vì "href", vì sau "href" trước khi các kết buộc có thể dẫn đến kết nối xấu.

lọc:

'use strict'; 

angular.module('myapp.filters.urlEncode', []) 

/* 
* Filter for encoding strings for use in URL query strings 
*/ 
.filter('urlEncode', [function() { 
    return window.encodeURIComponent; 
}]); 

xem:

<a ng-href="#/search?query={{ address | urlEncode }}" ng-repeat="address in addresses"> 
    {{address}} 
</a> 

Answer 4

đây là một ví dụ mã làm việc:

app.filter('urlencode', function() { 
    return function(input) { 
    return window.encodeURIComponent(input); 
    } 
}); 

Và trong mẫu:

<img ng-src="/image.php?url={{item.img_url|urlencode}}" 

Answer 5

@ giải pháp Tosh sẽ trở #/search?query=undefined nếu address là undefined trong

<a ng-href="#/search?query={{address | escape}}"> 

Nếu bạn muốn nhận được một chuỗi rỗng thay cho truy vấn của bạn, bạn cần phải mở rộng các giải pháp cho

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

này sẽ trở lại #/search?query= nếu address không xác định.