How to Compile Angular Expressions in Ng-Bind-HTML Directive

AngularJS ng-bind-html: Compiling Angular Code

Introduction

Ng-bind-html directive allows for the dynamic inclusion of HTML code in templates. While it works for basic HTML, angular templates are not interpreted when included. This article provides a solution to compile Angular expressions embedded within ng-bind-html.

Step-by-Step Solution

1. Install Directive:
Install the angular-bind-html-compile directive from GitHub: https://github.com/incuna/angular-bind-html-compile.

2. Include Directive in Module:

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

3. Use Directive in Template:

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

Example Usage

Controller Object:

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

JSON Response:

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

HTML Output:

<span>Dear John,</span>

Relevant Directive

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

The above is the detailed content of How to Compile Angular Expressions in Ng-Bind-HTML Directive. For more information, please follow other related articles on the PHP Chinese website!