각도(angular)를 사용하여 ng-module 내부의 htmlJS
angularJs에 문제가 있어요응용 프로그램이 서버에 데이터를 요청하고 서버에서 반환된 데이터 값 중 하나가 html 문자열입니다.이렇게 각진 템플릿으로 묶어서
<div>{{{item.location_icons}}</div>
하지만 예상하시겠지만 제가 보는 것은 아이콘 이미지가 아니라 기본적으로 div에 있는 것들은 다음과 같이 보입니다.
"<i class='my-icon-class'/>"
그건 내가 원하는 게 아니야
트랜슬루전 내의 html을 해석하기 위해 내가 무엇을 할 수 있는지 아는 사람이 있다.
사용하고 싶다ng-bind-html
그리고.ng-bind-html-unsafe
그런 목적으로요.
다음은 예를 제시하겠습니다.
ng-bind-html-unsafe는 권장되지 않으므로 대신 이 코드를 사용할 수 있습니다.
컨트롤러 내부에 기능을 생성해야 합니다.
$scope.toTrustedHTML = function( html ){
return $sce.trustAsHtml( html );
}
뷰에서 다음과 같은 것을 사용합니다.
<span ng-bind-html='toTrustedHTML( myHTMLstring )'></span>
$sce를 주입하는 것을 잊지 마십시오.
AppObj.controller('MyController', function($scope, $sce) {
//your code here
});
더 좋은 방법은$compile
대신ng-bind-html-unsafe
.
참조: http://docs.angularjs.org/api/ng.$compile
마지막으로, 현재 angularJs의 마지막 버전(릴리스 후보 1.2.0)에는,ng-bind-html-unsafe
지시.따라서 향후 앱을 업데이트하기 전에 이 옵션을 고려해 보시기 바랍니다.(ng-bind-html-unsafe
더 이상 작동하지 않을 수 있습니다...)
http://code.angularjs.org/1.2.0rc1/docs/api/ng.directive:ngBindHtml
언급URL : https://stackoverflow.com/questions/14888822/parse-html-inside-ng-bind-using-angularjs
'programing' 카테고리의 다른 글
여러 행을 한 행에 집약하는 Oracle SQL 쿼리가 있습니까? (0) | 2023.03.13 |
---|---|
Woocommerce에서 제품 이름 가져오기 (0) | 2023.03.13 |
로그인 페이지로 각도 리다이렉트 (0) | 2023.03.13 |
모든 엔트리를 한 번에 무한 스크롤로 로드하여 python의 HTML을 구문 분석하는 방법 (0) | 2023.03.13 |
웹 사이트(L SEP)에 이상한 기호가 표시됩니까? (0) | 2023.03.13 |