如何在角度v1.2中绑定html

时间:2013-09-12 20:35:17

标签: javascript html angularjs

我试图在angularJS中创建一个博客,在帖子消息部分我想从json获取消息并将其添加到这样的内容div中

<div class="content">
    {{json.message}}
</div>

现在我的div中有一个段落,它实际上是一个像这样的HTML代码

<p>this is my message</p>

但是当我这样做时,我在屏幕上看到了这个

  

<p>this is my message</p>

作为文字。我理解在以前的版本中我可以使用ng-bind-html-unsafe但我使用的是angularJS的v1.2。谁能告诉我类似于ng-bind-html-unsafe的代码,以便我可以在v1.2中完成这项工作? 谢谢你,丹尼尔!

2 个答案:

答案 0 :(得分:6)

您可以在1.2

中使用Strict Contextual Escaping services$sce

控制器:

function myCtrl($scope,$sce) {
    $scope.myHtml = $sce.trustAsHtml('<span>Hello World!</span>');
}

模板:

<div ng-app ng-controller="myCtrl">
    <div ng-bind-html="myHtml"></div>
</div>

示例:http://jsfiddle.net/TheSharpieOne/GKnrE/1/

答案 1 :(得分:4)

您需要注入并使用$sce服务将其标记为受信任的HTML,然后使用ng-bind-html指令(plunkr):

app.js:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $sce) {
  $scope.name = $sce.trustAsHtml('<p>Hello World</p>');
});

的index.html:

<body ng-controller="MainCtrl">
    <div class="content" ng-bind-html="name"></div>
</body>