Ng-Bind-HTML 지시문에서 각도 표현식을 컴파일하는 방법

AngularJS ng-bind-html: Angular 코드 컴파일

소개

Ng-bind-html 지시문을 사용하면 HTML 코드를 다음 항목에 동적으로 포함할 수 있습니다. 템플릿. 기본 HTML에서는 작동하지만 각도 템플릿은 포함 시 해석되지 않습니다. 이 글에서는 ng-bind-html에 포함된 Angular 표현식을 컴파일하는 솔루션을 제공합니다.

단계별 솔루션

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

2 . 모듈에 지시문 포함:

angular.module("app", ["angular-bind-html-compile"])

3. 템플릿의 지시문 사용:

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

사용 예

컨트롤러 개체:

$scope.letter = { user: { name: "John"}}

JSON 응답:

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

HTML 출력:

<span>Dear John,</span>

관련 지시문

(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);
                });
            }
        };
    }]);
}());

위 내용은 Ng-Bind-HTML 지시문에서 각도 표현식을 컴파일하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!