AngularJS: embedding angular expressions in database

Question

I have 2 database tables, letters and letterTemplates with an Angularjs frontend.

In letterTemplates.content column, I have a html template with an embedded angular expression like so:

<p> Dear {{letter.user.name}},</p>

And in the letters preview, I display the letterTemplate.content like so:

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

which returns the following output:

Dear {{letter.user.name}},

How do I get the Angular expression to execute?

---

The solutions outlined in How to make ng-bind-html compile angularjs code relied on using hardcoded Angular templates, whereas I need to parse html and angular statements from an API response.

Answer 1

Here's how I got it to work:

Step 1. Install this directive: https://github.com/incuna/angular-bind-html-compile

Step 2. Include the directive in the module.

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

Step 3. Use the directive in the template:

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

Output =

Dear John,

---

For reference sake, here's the 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);
                });
            }
        };
    }]);
}());