HTML을 출력하는 angularjs 필터 작성 방법

HTML을 출력하는 angularjs 필터 작성 방법

각도 판독 후JS tutorial step-9 나만의 Angular를 만들었습니다.JS 필터: 부울 데이터를 html로 변환해야 합니다.

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

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 출력을 필터에서 반환하지 않고 'OK' 또는 '삭제' 텍스트만 반환하여 아이콘을 표시하는 방법을 알고 있습니다.

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

하지만 이건 내가 원하는 게 아니야

를 사용해야 합니다.ng-bind-htmldirective (sanitize module 및 js 파일을 Import할 수 없음):https://docs.angularjs.org/api/ng/directive/ngBindHtml

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

또한 CSS(Bootstrap Identify)를 Import해야 아이콘이 동작할 수 있습니다.

저는 실행 예를 제시했습니다.

내가 잘못 읽은 게 아니라면, 너는 잘못 접근한 거야.

생각합니다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);
  }
}]);

각도 조정 필요

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

GIST 링크

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