Javascript AngularJS-在html模板中使用插值

我不确定以前是否有人遇到过这种情况，在谷歌上我似乎找不到例子。基本上，我正在创建一个长的html模板，并将其包装在一个ng bing html中，它加载我的html，但不加载我的插值。让我举个简单的例子：

控制器：

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

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

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>

$scope.example\u text\u here=“你好，世界！”
$scope.HTML\u template=“示例：{{{Example\u text\u here}}
”

HTML:

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

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

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>

输出

示例：{{Example\u text\u here}

我所期待的：

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

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

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>

示例：你好，世界

---

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

您应该使用$interpolate模块，然后注入当前范围，甚至$compile。请参阅更多$interpolate

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

试试这个

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

$scope.HTML_template=“示例：
“+$scope.example_text_here+”
”；

我想你应该使用

$sce

AngularJS的服务

控制器：

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

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

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>

angular.module（'app'，[…]）
.controller（'myCtrl'，函数（$scope，$sce）{
...
$scope.trustAsHtml=函数（参数）{
返回$sce.trustAsHtml（参数）；
};
...
$scope.example_text_here=“Hello World！”；
$scope.HTML_template=“示例：{{{Example_text_here}}
”；
...
});

标记：

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

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

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>

---

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

可能是重复的谢谢，但我也有一个ng重复，我不认为这会起作用。我会尝试一下。给出相同的结果{{示例{u text_here}}啊，这对我来说是新的，非常有趣的函数。到目前为止似乎有效。非常感谢你！。有一件小事很棘手，ng绑定html似乎不起作用。查找此项，但您知道使用$interpolate的正确方法是什么吗？