Angular - 用 html 插入字符串答案

【问题标题】：Angular - Interpolate string with htmlAngular - 用 html 插入字符串
【发布时间】：2015-02-02 04:55:14
【问题描述】：

所以我有一个看起来像这样的“模板字符串”：

var templateString = "Hello my name is {{name}}";

我要插入的名称是一个 in 变量。于是我就这样进行了：

var miniScope = {
 name: "Chuck"
};

var sentence = $interpolate(templateString)(miniScope);
/* sentence: "Hello my name is Chuck" */

这行得通。现在我想加粗这个名字。我显然已经尝试过：

var miniScope = {
 name: "<strong>Chuck</strong>"
};

但是 html 代码被转义了。知道如何实现这一目标吗？

PS：对于那些想知道为什么我不只是将字符串放入模板中的人，这是因为我的模板字符串来自服务器。

【问题讨论】：

标签： angularjs string-interpolation

【解决方案1】：

这个Plunkr 按预期输出“Hello my name is Chuck”。问题中的 JavaScript 没有改变。

var app = angular.module("app", ["ngSanitize"]);
app.controller("TestCtrl", TestCtrl);
function TestCtrl($scope, $interpolate) {
  var templateString = "Hello my name is {{name}}";

  var miniScope = {
    name: "<strong>Chuck</strong>"
  };

  $scope.sentence = $interpolate(templateString)(miniScope);
}

在您的 HTML 中，使用 ng-bind-html 来防止 HTML 被编码。

  <body ng-controller="TestCtrl">
    <div ng-bind-html="sentence"></div>
  </body>

【讨论】：

@PardeepJain 不，ng-bind-html 在 Angular 2 中不起作用。您需要使用 [innerHTML]，如 this 答案中所述。

【解决方案2】：

使用此指令从字符串编译内容。

.directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
    scope.$watch(
        function(scope) {
            return scope.$eval(attrs.compile);
        },
        function(value) {
            element.html(value);
            $compile(element.contents())(scope);
        }
    );
};
}])


$scope.name = "Vladimir";
$scope.str = "Hello my name is <strong>{{name}}</strong>";


<div compile="str"></div>

如果您需要Angular $sce doc，请使用 $sce 编译受信任的 html

但实际上所有这些东西都不是角度方式，您必须使用一些不同的部分并将其包含在 ng-include 指令中。

【讨论】：

我实际上以完全不同的方式完成了这项工作。如果这对其他人有帮助，我会留下帖子。感谢您的回复