如何在 Ng-Bind-HTML 指令中编译角度表达式

AngularJS ng-bind-html：编译 Angular 代码

简介

NG-bind-html 指令允许动态包含 HTML 代码模板。虽然它适用于基本 HTML，但角度模板在包含时不会被解释。本文提供了一个编译嵌入 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 指令中编译角度表达式的详细内容。更多信息请关注PHP中文网其他相关文章！