手风琴与NG重复和NG绑定-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']);

手风琴作品，但不支持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内容是宣布角不安全，由于它的的严格的语境避灾。

This is because the HTML content is declared unsafe by Angular due to it's Strict Contextual Escaping.

另外一个SO回答已经清楚地解释了如何可以解决： HTML注入，也就是说，如果你正在使用的版本角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重复和NG绑定-HTML将无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！