带有 ng-repeat 和 ng-bind-html 的手风琴不起作用 [英] accordion with ng-repeat and ng-bind-html won't work
问题描述
我正在尝试以这种方式使用手风琴和 html 内容:
I'm trying to use accordion and html content in this way:
<accordion>
<accordion-group ng-repeat="item in items">
<accordion-heading>
<a class="btn btn-primary btn-block btn-elenco">
<img postsrc="img/flag/flag_{{item.index}}.jpg">
</a>
</accordion-heading>
<p ng-bind-html="item.content"></p>
</accordion-group>
</accordion>
和
var items = [];
for(var i=0;i<10;i++){
var content = "<div>TEST</div>";
items.push({index:i,content:content});
}
$scope.items = items;
var app = angular.module('MyApp',['ngSanitize','ui.bootstrap']);
Accordion 可以工作,但 html 不会渲染到 p 标签中.
Accordion works but html isn't rendered into p tag.
可能是什么问题?
编辑
如果我尝试以下操作:
<div ng-bind-html="to_trusted(item.content)"></div>
并向控制器添加函数:
$scope.to_trusted = function(html_code)
{
console.log(html_code);
return $sce.trustAsHtml(html_code);
}
没有任何变化,在控制台中我得到了许多未定义"!
Nothing changes and in console i get many "undefined"!
推荐答案
这是因为 HTML 内容被 Angular 声明为不安全的,因为它是 严格的上下文转义.
This is because the HTML content is declared unsafe by Angular due to it's Strict Contextual Escaping.
另一个 SO 答案已经清楚地解释了如何解决这个问题:HTML 注入,也就是说,如果您使用的是 Angular 版本1.2.0 或更高版本.
Another SO answer already explains clearly how this can be solved: HTML injection, that is if you are using Angular version 1.2.0 or up.
我创建了一个 Plunkr 来匹配您的情况.
I created a Plunkr to match your case.
这篇关于带有 ng-repeat 和 ng-bind-html 的手风琴不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!