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)이 아닙니다.
이 과정에서 약간의 위생이 발생한다고 생각합니다.
이 특정 필터에 대해이 살균 기능을 끌 수 있습니까?
또한 필터에서 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 렌더링이 필요한 경우 지시문을 대신 살펴보아야합니다.