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입니다.

---

encodeURIComponent자바 스크립트 에서 네이티브 를 사용할 수 있습니다 . 또한 그것을 활용하기 위해 문자열 필터로 만들 수 있습니다.

다음은 escape필터 를 만드는 예입니다 .

js :

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

html :

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

(업데이트 : ng-href평범한 대신 사용 하는 Karlies의 답변에 적응 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의 대답에는 필터 아이디어가 정확히 맞습니다. 나는 그렇게하는 것이 좋습니다. 그러나 이렇게하면, 당신은 사용해야 에 "NG-href가" 보다는 "HREF를" 나쁜 링크 될 수 있습니다 바인딩 결의하기 전에 "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