programing

각도(angular)를 사용하여 ng-module 내부의 htmlJS

codeshow 2023. 3. 13. 20:42
반응형

각도(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

반응형