UI引导不能与$ scene . trustashhtml()结合使用

Question

我使用angularJs (v1.4.7)和ui。bootstrap结合html代码，我得到与REST API。问题是，如果我用ui得到html。在内部引导指令时，它不能正确显示(指令没有"翻译")。转换成HTML代码)。如果我将相同的html直接复制粘贴到我的html中，那么就可以了。我假设ui。Bootstrap指令在插入HTML代码之前执行(或者根本不执行)。

有什么解决方法吗?

简化代码片段:

Ctrl:

FsDao.readDoc().then(
function (d) {
$scope.docHtml = $sce.trustAsHtml(d.html);
},
function (error) {
MainUtil.growl(Msg.DATA_ERROR, "danger");
}
);

index . html:

<uib-accordion close-others="false">
<div ng-bind-html="docHtml"></div>
</uib-accordion>

HTML (d.html)

<p style="text-align: right;">Some txt</p>
<uib-accordion-group class="panel-default" is-open="doc.open">
<uib-accordion-heading>HEADING 1</uib-accordion-heading>
<ul>
<li>first</li>
<li>second</li>
</ul>
</uib-accordion-group>
<uib-accordion-group class="panel-default" is-open="doc.open">
<uib-accordion-heading>HEADING 2</uib-accordion-heading>
<ul>
<li>first</li>
<li>second</li>
</ul>
</uib-accordion-group>

Answer 1

创建如下组件:

app.directive('customComponent', function($compile) {
return {
restrict: 'E',
template: function(elem, attrs) {
return '<div></div>';
},
scope:false,
link:function(scope, element, attr){
if (typeof(attr.template) == "string") {
var innerComponent = $compile(attr.template)(scope);
element.append(innerComponent);
}
},
replace: true
};
});

然后在你的代码中使用这个组件:

<uib-accordion close-others="false">
<custom-component template="{{docHtml}}"></custom-component>
</uib-accordion>

的例子:https://jsfiddle.net/avgustin/qnj45v1a/