Ng-Bind-HTML ディレクティブで Angular 式をコンパイルする方法

AngularJS ng-bind-html: Angular コードのコンパイル

はじめに

Ng-bind-html ディレクティブを使用すると、HTML コードを動的に組み込むことができます。テンプレート。基本的な HTML では機能しますが、Angular テンプレートが含まれている場合は解釈されません。この記事では、ng-bind-html 内に埋め込まれた Angular 式をコンパイルするためのソリューションを提供します。

ステップバイステップのソリューション

1.インストール ディレクティブ:
GitHub から angular-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 ディレクティブで Angular 式をコンパイルする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。