AngularJS + Bootstrap - 将$编译的HTML注入popover

Question

我正在尝试为一系列元素的popover构建动态内容。

使用此指令：

.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()
            });
        }
    }
});

popover的内容包含popover的.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>

不幸的是，popover的内容仍然是未编译的原始html，而不是渲染的角度模板：

如何将完全渲染的Angular模板（将使用ng-click和ng-hide等指令）注入弹出窗口？ 我尝试将$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

Answer 2

我能找到答案。需要将scope作为参数传递给$compile返回的函数：

.directive('popover', function($compile){
    return function(scope, element, attrs) {

        var tpl = $(element).find('.pop-content').html();

        $(element).popover({
            html: true,
            placement: "top",
            content: $compile(tpl)(scope)
        });

    };
});

此外，我将.popover-content更改为element的子元素：

<div popover>
     <div class="popover-content">{{ 3+4 }}</div>
</div>