此处将为大家介绍关于AngularJS-渲染字符串中包含的HTML标签的详细内容，并且为您解答有关angular渲染页面原理的相关问题，此外，我们还将为您介绍关于angular2展示包含html标签的
此处将为大家介绍关于AngularJS-渲染字符串中包含的HTML标签的详细内容，并且为您解答有关angular渲染页面原理的相关问题，此外，我们还将为您介绍关于angular2展示包含html标签的内容、angularjs ng-bind-html 指令 对html标签转译、angularjs – Angular JS – 如何处理重复的HTML代码,如页眉/页脚？、angularjs – Angular – 用html插值字符串的有用信息。
本文目录一览：- AngularJS-渲染字符串中包含的HTML标签（angular渲染页面原理）
- angular2展示包含html标签的内容
- angularjs ng-bind-html 指令 对html标签转译
- angularjs – Angular JS – 如何处理重复的HTML代码,如页眉/页脚？
- angularjs – Angular – 用html插值字符串
AngularJS-渲染字符串中包含的HTML标签（angular渲染页面原理）
我的数据库存储产品信息，其中许多信息被组织成列表。我将数据加载到Angular中$scope.post。
例如，
$scope.post.size_description = ''<li> Fits true to size. Take your normal size\r</li> <li> Slim-cut, mid-rise style</li> <li> Long in length, alter to fit</li> <li> Model wears an IT 48\r</li> <li> Model measures: waist size 32, height 6\''1"/ 185cm\r</li>''.当我尝试将此数据加载到我的Angular应用程序中时，它会以文本形式呈现（即<li>未解析）。我了解这可能是出于安全原因而发生的，但是有什么解决方法吗？
答案1
小编典典正如Damax在这里所说的那样：
<div ng-bind-html-unsafe="post.size_description"></div>
angular2展示包含html标签的内容
angular2采用{{变量}}的方式展示数据，但字符串中包含html代码，会被自动过滤掉。
采用<span [innerHTML]="b"></span>这种方式可以直接将html代码展示出来。
但这样写又会存在一个新问题：展示的html标签中，style的属性会被过滤掉。
坑~~~
解决方法：使用ng2服务DomSanitizer中的bypassSecurityTrustHtml 方法
import { Component, OnInit } from ''@angular/core'';
import { DomSanitizer } from ''@angular/platform-browser'';
@Component({
selector: ''my-zhizaoZixunDetail'',
templateUrl: ''./zhizaoZixunDetail.component.html'',
styleUrls: [ ''./zhizaoZixunDetail.component.css'' ],
providers: [ZhizaoZixunDetailService]
})
export class ZhizaoZixunDetailComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute,
private domSanitizer: DomSanitizer,
private zhizaoZixunDetailService: ZhizaoZixunDetailService) {};
ngOnInit(): void {
var results = this.zhizaoZixunDetailService.getData(this.zhizaoZixun);
results.then((response) => {
if(response!=null) {
this.detail=response;
this.detail["wenzhNeir"]=
this.domSanitizer.bypassSecurityTrustHtml(this.detail["wenzhNeir"]);
}
}
}
}
用domSanitizer.bypassSecurityTrustHtml转换一下就可以解决了。
参考：http://www.jianshu.com/p/ef008e9c07de
angularjs ng-bind-html 指令 对html标签转译
文章参考
http://www.tuicool.com/articles/2eIrIz
http://www.runoob.com/angularjs/ng-ng-bind-html.html
在工作中遇到问题：用户在后台添加一篇新闻，在数据库中存储的是HTML代码，从数据库查询出来之后结果把HTML代码显示出来。
解决办法：使用ng-bind-html 指令，能够对HTML代码的标签转译，在浏览器中显示
ng-bind-html 指令会自动过滤掉标签内的样式？
所谓sce即“Strict Contextual Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。
$sce干的事情来看就是将语境中存在的跨站攻击的风险给干掉.
我们返回的内容中包含一系列的html标记，它可以通过使用$sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。所以，我们必须在我们的控制器中引入$sce服务.
代码如下
【1】angular源码分析：angular中入境检察官$sce
【2】野兽的 Angular 学习 - -sce和sce和sceDelegate
【3】$sce官方手册
angularjs – Angular JS – 如何处理重复的HTML代码,如页眉/页脚？
有没有官方/推荐的方式来做到这一点？
<html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-include src="'header.url'"></div> ... <div ng-include src="'footer.url'"></div> </body> </html>
有了这个，您可以在所有页面中重复使用相同的header.url和footer.url。
angularjs – Angular – 用html插值字符串
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：对于那些想知道为什么我不把字符串放在模板中的人,这是因为我的模板字符串来自服务器.
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>
关于AngularJS-渲染字符串中包含的HTML标签和angular渲染页面原理的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于angular2展示包含html标签的内容、angularjs ng-bind-html 指令 对html标签转译、angularjs – Angular JS – 如何处理重复的HTML代码,如页眉/页脚？、angularjs – Angular – 用html插值字符串等相关内容，可以在本站寻找。
本文标签：
