AngularJS 뷰에서 HTML 조각을 안전하게 렌더링하는 방법은 무엇입니까?

AngularJS 컨트롤러에서 뷰에 HTML 조각 삽입

AngularJS에서는 컨트롤러에서 HTML 조각을 생성하고 뷰에서 렌더링할 수 있습니다. 이는 목록이나 기타 복잡한 UI 요소를 동적으로 생성하는 데 유용할 수 있습니다.

이를 달성하려면 먼저 HTML 조각을 저장할 모델 속성을 생성하세요. 아래 예에서는 "customHtml" 속성을 생성합니다.

var SomeController = function () {
    this.customHtml = '<ul><li>render me please</li></ul>';
}

다음으로 뷰에서 ng-bind-html 지시문을 사용하여 customHtml 속성을 요소에 바인딩합니다.

<div ng-bind-html="customHtml"></div>

그러나 AngularJS는 HTML을 삭제 목적에 안전하지 않은 것으로 간주하므로 HTML을 따옴표 안의 문자열로 렌더링합니다. 이 문제를 해결하려면 $sce 서비스를 사용하거나 ngSanitize 모듈을 포함하면 됩니다.

$sce 사용

먼저 $sce 서비스를 컨트롤러에 삽입합니다.

app.controller('SomeController', function($sce) {
    // ...
});

그런 다음 $sce.trustAsHtml() 메소드를 사용하여 HTML을 변환합니다. 문자열을 안전한 형식으로 변환:

this.customHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize 사용

ngSanitize를 사용하려면 먼저angular-sanitize.min.js 스크립트를 포함합니다:

<script src="lib/angular/angular-sanitize.min.js"></script>

그런 다음 ngSanitize를 AngularJS의 종속성으로 포함하세요. 모듈:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

ngSanitize를 사용하면 HTML 문자열을 모델 속성에 직접 할당할 수 있습니다.

this.customHtml = someHtmlVar;

두 방법 모두 뷰에서 HTML 조각을 동적으로 생성하고 렌더링할 수 있습니다. AngularJS 애플리케이션에 더 큰 유연성을 제공합니다.

위 내용은 AngularJS 뷰에서 HTML 조각을 안전하게 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!