ng-bind-html을 사용하여 동적으로 포함된 Angular 템플릿을 컴파일하는 방법은 무엇입니까?

angular.js: ng-bind-html을 사용하여 동적으로 포함된 HTML 코드 컴파일

angular.js로 작업할 때 시나리오가 발생할 수 있습니다. HTML 코드를 템플릿에 동적으로 포함해야 하는 경우 이를 달성하기 위해 일반적으로 ng-bind-html 지시문이 사용됩니다. 그러나 이 접근 방식을 사용하여 Angular 템플릿을 포함하려고 하면 해당 템플릿이 해석되지 않고 단순히 기능 없이 페이지에 포함될 수 있습니다.

해결책

대신 하드코딩된 템플릿을 사용하면 API 응답 내에 포함된 Angular 표현식을 컴파일할 수 있는 솔루션을 사용할 수 있습니다. 단계별 가이드는 다음과 같습니다.

1단계: GitHub에서 angle-bind-html-compile 지시어를 설치합니다: https://github.com/incuna/angular-bind -html-compile

2단계: Angular 모듈에 지시문을 포함합니다.

<code class="javascript">angular.module("app", ["angular-bind-html-compile"])</code>

3단계: Angular 모듈에서 지시문을 활용합니다. 다음과 같은 템플릿:

<code class="html"><div bind-html-compile="letterTemplate.content"></div></code>

예:

컨트롤러 개체:

<code class="javascript">$scope.letter = { user: { name: "John" } };</code>

JSON 응답 :

{ "letterTemplate": [
    { content: "<span>Dear {{letter.user.name}},</span>" }
] }

HTML 출력:

<code class="html"><div bind-html-compile="letterTemplate.content"> 
   <span>Dear John,</span>
</div></code>

설명:

Angular-bind- html-compile 지시어는 bin-html-compile 속성에 제공된 표현식의 변경 사항을 감시합니다. 값이 변경되면 요소의 HTML 콘텐츠가 업데이트되고 $compile 서비스를 사용하여 요소 내의 모든 Angular 표현식이 컴파일됩니다. 이를 통해 ng-bind-html을 사용하여 Angular 템플릿을 동적으로 포함하고 실행할 수 있습니다.

추가 참조:

참조용 관련 지시문 코드는 다음과 같습니다.

<code class="javascript">(function () {
    'use strict';

    var module = angular.module('angular-bind-html-compile', []);

    module.directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
            }
        };
    }]);
}());</code>

위 내용은 ng-bind-html을 사용하여 동적으로 포함된 Angular 템플릿을 컴파일하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!