AngularJS-在HTML模板中使用插值

Question

不知道以前是否有人遇到过这种情况，在Google上查找我似乎找不到示例。 基本上，我正在创建一个超大的html模板，并将其包装在ng-bing-html中，它会加载我的html，但是会加载我的插值。 让我给你一个简单的例子：

控制器：

$scope.example_text_here = "Hello World!"
$scope.HTML_template = "<p><strong> Example: </strong> {{ example_text_here }}</p>"

HTML：

<div ng-bind-html="HTML_template"></div>

产量

范例： {{example_text_here}}

我期望的是：

示例：世界您好！

有人知道如何做到这一点吗？

Answer 1

您应该使用$ interpolate模块，然后注入当前范围甚至$ compile。 查看更多https://docs.angularjs.org/api/ng/service/ $ interpolate

$interpolate($scope.HTML_template)($scope)

Answer 2

尝试这个

$scope.HTML_template = "<p><strong> Example: 
 </strong>"+$scope.example_text_here+"</p>";

Answer 3

我认为您应该使用AngularJS的 $sce服务。

控制器：

angular.module('app', [...])

.controller('myCtrl', function($scope, $sce) {
  ...
  $scope.trustAsHtml = function(params) {
    return $sce.trustAsHtml(params);
  };
  ...
  $scope.example_text_here = "Hello World!";
  $scope.HTML_template = "<p><strong> Example: </strong> {{ example_text_here }}</p>";
  ...
});

标记：

<div ng-bind-html="trustAsHtml(HTML_template)"></div>

现在希望您能得到预期的结果。 谢谢。