代码之家 › 专栏 › 技术社区 › Daniel Ellison

AngularJS-在html模板中使用插值

angularjs html javascript

Daniel Ellison · 技术社区 · 6 年前

控制器:

$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>

输出

{{示例文本}}

我期待的是:

你好,世界!

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

3 回复 | 直到 6 年前

Raphael Willian da Costa 6 年前

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

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

Sandeep 6 年前

试试这个

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

SuperStar518 JamesE 6 年前

我想你应该用 $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>

现在希望你能预期

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前