angularjs – Angular – 用html插值字符串

发布时间：2020-12-17 07:55:10 所属栏目：安全来源：网络整理

导读：所以我有一个“模板字符串”,如下所示： var templateString = "Hello my name is {{name}}"; 我要插入的名称是变量.所以我这样做了： var miniScope = { name: "Chuck"};var sentence = $interpolate(templateString)(miniScope);/* sentence: "Hello my na

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

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：对于那些想知道为什么我不把字符串放在模板中的人,这是因为我的模板字符串来自服务器.

这个 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!