AngularJS를 사용하여 url 인코딩 앵커링크를 생성하는 방법

AngularJS를 사용하여 url 인코딩 앵커링크를 생성하는 방법

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

올바르게 이해하면 URL 인코딩되지 않은 링크가 생성됩니다.올바른 부호화 방법은 무엇입니까?#/search?query={{address}}?

주소의 예는 다음과 같습니다.1260 6th Ave, New York, NY.

네이티브를 사용할 수 있습니다.encodeURIComponentjavascript로.스트링 필터로 만들어 활용할 수도 있습니다.

여기 만들기의 예가 있다.escape필터링을 실시합니다.

js:

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

html:

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

(갱신: Karlies의 답변에 적응하여ng-href평범하지 않고href)

@Tosh의 솔루션은 반환된다.#/search?query=undefined한다면address정의되어 있지 않다

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

쿼리 대신 빈 문자열을 가져오려면 솔루션을 다음과 같이 확장해야 합니다.

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

이것은 돌아올 것이다.#/search?query=한다면address정의되어 있지 않습니다.

encodeUri 필터를 사용할 수 있습니다.https://github.com/rubenv/angular-encode-uri

1. 프로젝트에 angular-encode-uri를 추가합니다.

   bower install --save angular-encode-uri

2. HTML 파일에 추가합니다.

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

3. 앱 모듈에 대한 종속성으로 참조:

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

4. 뷰에서 사용:

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

Tosh의 답변은 필터 아이디어를 정확히 가지고 있습니다.저는 그렇게 하는 것을 추천합니다.단, 이 경우 바인딩이 해결되기 전에 "href"를 따라가면 링크가 불량해질 수 있으므로 "href"가 아닌 "ng-href"를 사용해야 합니다.

필터:

'use strict';

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

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

표시:

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

동작 코드의 예를 다음에 나타냅니다.

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

템플릿에서 다음을 수행합니다.

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

언급URL : https://stackoverflow.com/questions/14512583/how-to-generate-url-encoded-anchor-links-with-angularjs