我正在尝试为一系列元素的弹出窗口构建动态内容。
使用这个指令:
.directive('popover', function($compile){
return {
link: function(scope, element, attrs) {
// define popover for this element
$(element).popover({
html: true,
placement: "top",
// grab popover content from the next element
content: $(element).siblings(".pop-content").html()
});
}
}
});
弹出框的内容包含弹出框的 .pop-content 兄弟的 HTML 内容:
<div ng-repeat="o in os">
<a popover href="javascript:;">
show popover
</a>
<div ng-hide="true" class="pop-content">
{{ 3+4 }}
</div>
</div>
不幸的是,弹出窗口的内容将保留为未编译的原始 html,而不是呈现的 Angular 模板:
如何将完全呈现的 Angular 模板(将使用 ng-click 和 ng-hide 等指令)注入(inject)弹出框?
我尝试将 $compile( (element).siblings(".pop-content").html() )(scope)
调用为 content
但结果是完全空的弹出窗口。
最佳答案
使用 $compile,你走在正确的轨道上;但是,您需要传递 $compile .contents()
而不是 .html()
:
// grab popover content from the next element
content: $compile( $(element).siblings(".pop-content").contents() )(scope)
关于javascript - AngularJS + Bootstrap - 将 $compiled HTML 注入(inject) popover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26576327/