javascript 如何使用 AngularJS 渲染原始 html？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31880234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to render raw html with AngularJS?
提问by membersound
I'm creating an AngularJSsingle page application.
The data will be fetched from a webservice in json-format.
我正在创建一个AngularJS单页应用程序。数据将以 -json格式从网络服务中获取。
The problem is that some text elements come with preformatted html tags
问题是一些文本元素带有预先格式化的 html 标签
json output:
json输出：
{
"text": "<p><span style="text-decoration: underline;"><strong>test text</string></span></p>"
}
Now how can I display this text and render the html directly, so that only "test" is shown to the user and the rest serves as markup?
现在如何显示此文本并直接呈现 html，以便仅向用户显示“测试”而其余部分用作标记？
<h1>{{data.text}}</h1>
回答by mhx
You need to add ng-bind-html="data.text"to your h1 tag.
您需要添加ng-bind-html="data.text"到您的 h1 标签。
Your html would look like:
你的 html 看起来像：
<h1 ng-bind-html="data.text"></h1>
Documentation: ngBindHtml
文档：ngBindHtml
回答by schellingerht
Update2: is it possible to strip the html for you? It could be done so:
Update2：是否可以为您剥离 html？可以这样做：
angular.module('myApp.filters', []).
filter('htmlToPlaintext', function() {
return function(text) {
return String(text).replace(/<[^>]+>/gm, '');
};
}
);
And you html:
而你 html：
<div>{{myText | htmlToPlaintext}}</div>
See more information: angularjs to output plain text instead of html
查看更多信息：angularjs 输出纯文本而不是 html
Update: do you really need the html from your json? It's better to store your html in the views and get the data from your json. Nice separation and very easy to use.
更新：您真的需要 json 中的 html 吗？最好将您的 html 存储在视图中并从您的 json 中获取数据。很好的分离，非常易于使用。
It's possible, but not so easy as non-html (great security).
这是可能的，但不像非 html 那样容易（非常安全）。
In Angular 1.3 you need as follows:
在 Angular 1.3 中，您需要如下：
<div ng-bind-html="htmlBind"></div>
In your controller add this:
在您的控制器中添加：
$scope.htmlBind = $sce.trustAsHtml('<span>Hi, I am <em>Joe</em>');
Explanation: you see the $sce:
说明：您看到 $sce：
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
trustAs(type, value)
Delegates to $sceDelegate.trustAs. As such, returns an object that is trusted by angular for use in specified strict contextual escaping contexts (such as ng-bind-html, ng-include, any src attribute interpolation, any dom event binding attribute interpolation such as for onclick, etc.) that uses the provided value. See * $sce for enabling strict contextual escaping.
$sce 是一个为 AngularJS 提供严格上下文转义服务的服务。
trustAs（类型，值）
委托给 $sceDelegate.trustAs。因此，返回一个受 angular 信任的对象，用于指定的严格上下文转义上下文（例如 ng-bind-html、ng-include、任何 src 属性插值、任何 dom 事件绑定属性插值，例如用于 onclick 等）。 ) 使用提供的值。请参阅 * $sce 以启用严格的上下文转义。
Read more here:
在此处阅读更多信息：
回答by RobertRPM
Try to use this https://docs.angularjs.org/api/ng/directive/ngBind
尝试使用这个https://docs.angularjs.org/api/ng/directive/ngBind
<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);
</script>
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="name"></label><br>
Hello <span ng-bind="name"></span>!
</div>
