Question

所以我有一个“模板字符串”，如下所示：

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

我要插入的名称是变量。所以我这样做了：

var miniScope = {
 name: "Chuck"
};

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

这很有效。现在我想粗体这个名字。我显然已经尝试过：

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

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

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

Answer 1

此Plunkr输出＆＃34;您好我的名字是 Chuck ＆＃34;正如所料。 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>

Answer 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指令中。

Angular - 使用html插入字符串

2 个答案: