HTML을 출력하는 angularjs 필터를 만드는 방법

HTML을 출력하는 angularjs 필터를 만드는 방법

---

AngularJS 자습서 9 단계를 읽은 후 부울 데이터를 html로 변환해야하는 자체 AngularJS 필터를 만들었습니다.

내 필터 코드는 다음과 같습니다.

angular.module('phonecatFilters', []).filter('iconify', function () { // My custom filter
    return function (input) {
        return input ? '<i class="icon-ok"></i>' : '<i class="icon-remove"></i>';
    }
});

내 HTML 코드는 다음과 같습니다.

<dt>Infrared</dt>
  <dd>{{phone.connectivity.infrared | iconify }}"></dd>

문제는 borwser가 반환 값을 문자 그대로 다음과 같이 표시한다는 것입니다.

<i class="icon-ok"></i>

표시되어야하는 아이콘 (또는 렌더링 된 html)이 아닙니다.

다음은 JSFiddle 예제입니다.

이 과정에서 약간의 위생이 발생한다고 생각합니다.

이 특정 필터에 대해이 살균 기능을 끌 수 있습니까?

또한 필터에서 HTML 출력을 반환하지 않고 대신 '확인'또는 '제거'텍스트를 반환하여 아이콘을 표시하는 방법을 알고 있습니다.

<i class="icon-{{phone.connectivity.infrared | iconify}}"><i>

그러나 이것은 내가 원하는 것이 아닙니다.

---

다음 ng-bind-html지시문을 사용해야합니다 (소니 타이즈 모듈 및 js 파일을 가져와야 함) : https://docs.angularjs.org/api/ng/directive/ngBindHtml

<span ng-bind-html='phone.connectivity.infrared | iconify'></span>

또한 아이콘이 작동 할 때 볼 수 있도록 CSS ( Bootstrap) 를 가져와야 합니다.

나는 작동 예를 제공했다 .

---

내가 잘못 읽지 않는 한 넌 잘못된 길로 다가가

ng-class는이 작업에 필요한 지시문이며 클래스 속성으로 렌더링하는 것보다 안전하다고 생각합니다.

귀하의 경우에는 id 문자열을 클래스로, 값을 평가 식으로 사용하는 객체 문자열을 추가하십시오.

<i ng-class="{
'icon-ok':!phone.connectivity.infrared,
'icon-remove':phone.connectivity.infrared
}"></i>'

참고로, html / dom을 조작하려면 지시문 (내장 및 사용자 정의) 만 사용해야하며 더 복잡한 html 렌더링이 필요한 경우 지시문을 대신 살펴보아야합니다.

---

이 필터 시도

filter('trust', ['$sce',function($sce) {
  return function(value, type) {
    return $sce.trustAs(type || 'html', value);
  }
}]);

requires angular-sanitize

var app = angular.module("myApp", ['ngSanitize']);

Gist Link

참고URL : https://stackoverflow.com/questions/13251581/how-to-create-angularjs-filter-which-outputs-html