인코딩을 호출하려면 어떻게 해야 합니까?각도에서 본 요산 성분JS 템플릿?

인코딩을 호출하려면 어떻게 해야 합니까?각도에서 본 요산 성분JS 템플릿?

각진 JS 템플릿에 블록이 있습니다.

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

단, foo.id 속성에는 펑키 문자('/')가 포함될 수 있습니다.나는 다음과 같은 것을 하고 싶다.

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

효과가 없다고요?어떻게 하면 고칠 수 있을까요?

이 필터를 생성하면encodeURIComponent

예.

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/

@aj-richardson의 추천을 고려하여 @jimr의 코드를 수정.

표현식 내의 필터를 사용하여 데이터를 렌더링하기 전에 데이터 형식을 지정할 수 있습니다.

필터를 만듭니다.

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링크가 Angular에 의해 렌더링되는지 확인합니다.클릭하기 전에 JS를 선택합니다.
• $window를 사용하는 대신 필터에 주입됩니다.window직접적으로.

  global을 참조해 주세요.window을 통해$window테스트용으로 덮어쓰거나 제거하거나 조롱할 수 있습니다.

---

참고 자료:

1. AngularJS API: $window
2. AngularJS 개발자 가이드: 필터
3. AngularJS 개발자 가이드: 식

잘못된 형식의 URI 오류를 처리하려면 필터 함수를 작성한 후 try-catch를 사용하여encodeURIComponent.

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

언급URL : https://stackoverflow.com/questions/16630471/how-can-i-invoke-encodeuricomponent-from-angularjs-template