angularjs在html获取数据,angularjs中获取数据⾃动解析成html
标记（转）
关于angularJS绑定数据时⾃动转义html标签
折磨了两天，最后发现答案竟如此简单，不过⾟苦还是值得的，毕竟为了弄明⽩这⼀点⼜学习了更多代码。
angularJS在进⾏数据绑定时默认是会以⽂本的形式输出，也就是对你数据中的html标签不进⾏转义照单全收，这样提⾼了安全性，
防⽌了html标签中的注⼊攻击，但有些时候还是需要的，特别是从数据库读取带格式的⽂本时，⽆法正常的显⽰在页⾯中。⽽要对html进⾏转义，
则要在数据绑定的html标签中使⽤ng-bind-html属性，该属性依赖与$sanitize，也就是需要引⼊angular-sanitize.js⽂件，并在module定义
时注⼊该服务ngSanitize。⽐如:
html:
angular和angularjsjavascript:
function myCtr($scope){
$scope.htmlStr = ‘
};
如此则可以实现html转义，但有个问题就是style这种标签会被angularJS认为是不安全的所以统统⾃动过滤掉，⽽为了保留这些
就需要开启⾮安全模式。
但我遇到的问题不⽌这些，以上只是静态的去绑定，⽽我⾃⼰开发的页⾯是通过⾃定义service中的$http异步加载获取数据，
然后在success事件中为$scope绑定数据列表，⽽在模板中则使⽤
...
由angularJS⾃动循环⽣成，那么问题来了，如何让⾃动加载的数据转义html标签呢。
这两天从directive指令、filter过滤器到$sanitize、$complie⼏乎都试了⼀遍，不过因为⼀直没有注意到关键的⼀点所以
始终没有实现。后来发现(还是偶然读的⼀篇blog)，ng-bind-html中也是可以绑定循环时的数据的，
也就是之前我⼀直以为ng-bind-html中只可以绑定在后端$scope中定义的变量，也就是类似上⾯提到的那个例⼦，⽽实际上是可以这么绑定的：
html：
{{article.title}}
javascript：
success(function (data) {
$scope.articles = data;
});
myApp.filter(‘trustHtml‘, function ($sce) {
return function (input) {
return $ustAsHtml(input);
}
});
其中$sce是angularJS⾃带的安全处理模块，$ustAsHtml(input)⽅法便是将数据内容以html的形式进⾏解析并返回。将此过滤器添加到ng-bind-html所绑定的数据中，便实现了在数据加载时对于html标签的⾃动转义。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。