AngularJS：在数据库中嵌入角度表达式(AngularJS: embedding angular expressions in database)

AngularJS：在数据库中嵌入角度表达式(AngularJS: embedding angular expressions in database)

我有2个数据库表， 字母和letterTemplates与Angularjs前端。

在letterTemplates.content列中，我有一个带有嵌入式角度表达式的html模板，如下所示：

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

在字母预览中，我显示letterTemplate.content，如下所示：

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

返回以下输出：

Dear {{letter.user.name}},

如何执行Angular表达式？

---

如何使用ng-bind-html编译angularjs代码中概述的解决方案依赖于使用硬编码的Angular模板，而我需要从API响应中解析html和angular语句。

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.

最满意答案

以下是我如何使用它：

步骤1.安装此指令： https ： //github.com/incuna/angular-bind-html-compile

步骤2.在模块中包含该指令。

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

步骤3.在模板中使用该指令：

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

输出=

Dear John,

---

为了参考，这是相关的指令：

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

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