javascript - AngularJS + Bootstrap - 将 $compiled HTML 注入(inject) popover

Question

我正在尝试为一系列元素的弹出窗口构建动态内容。

使用这个指令:

.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 但结果是完全空的弹出窗口。

Answer 1

使用 $compile，你走在正确的轨道上；但是，您需要传递 $compile .contents() 而不是 .html():

// grab popover content from the next element
content: $compile( $(element).siblings(".pop-content").contents() )(scope)

JSFiddle