手风琴与ng-repeat和ng-bind-html无效

时间:2014-01-30 11:53:50

标签: html angularjs angularjs-ng-repeat ng-bind-html

我正试图以这种方式使用手风琴和html内容:

<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标签。

可能是什么问题?

修改

如果我尝试这样的话:

<div ng-bind-html="to_trusted(item.content)"></div>

并向控制器添加功能:

$scope.to_trusted = function(html_code)
    {
    console.log(html_code);
    return $sce.trustAsHtml(html_code);
    }

没有任何变化,在控制台中我得到许多“未定义”!

1 个答案:

答案 0 :(得分:5)

这是因为Angular宣称HTML内容不安全,因为它是Strict Contextual Escaping

另一个SO答案已经清楚地解释了如何解决这个问题:HTML injection,即如果您使用的是Angular 1.2.0或更高版本。

我创建了一个Plunkr来匹配您的情况。