AngularJS + Bootstrap - inject $compiled HTML into popover

Question

I am trying to build dynamic content for the popover of a series of elements.

Using this directive:

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

The popover's content contains the HTML content of the .pop-content sibling of the popover:

<div ng-repeat="o in os">
    <a popover href="javascript:;">
        show popover
    </a>

    <div ng-hide="true" class="pop-content">
        {{ 3+4 }}
    </div>
</div>

Unfortunately, the content of the popover will remain the uncompiled, raw html and not a rendered angular template:

enter image description here

How can I inject the fully rendered Angular template (which will use directives such as ng-click and ng-hide) into the popover? I tried calling $compile( (element).siblings(".pop-content").html() )(scope) as content but results in completely empty popovers.

Christopher · Accepted Answer · 2014-10-26 19:53:30Z

4

You're on the right track with using $compile; however, you need to pass $compile the .contents() not the .html():

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

JSFiddle

answered Oct 26, 2014 at 19:53

Christopher

8759 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Christopher Over a year ago

@doque Curious. After fiddling around I think this might just be a bug with Angular, particularly because HTML comments for each iteration in the directive are still produced, despite no actual HTML to go with them. The scope is intact, the array is available, and other directives seem to play nice within it, but ng-repeat has this strange behavior even without referencing any model: Strange behavior

Christopher Over a year ago

If you don't need ng-repeat specifically within the popover content, but rather for the parent element, then that should still be good to go: ngRepeat container

doque Over a year ago

Yes @Christopher, it's quite odd. I was able to (somehow) get ng-repeat to work (see here), but now it's being repeated multiple times.

doque · Accepted Answer · 2014-10-26 18:47:26Z

3

I was able to find the answer. One needs to pass scopeas a parameter to the function returned by $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)
        });

    };
});

Further, I changed the .popover-content to be a child element of element:

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

answered Oct 26, 2014 at 18:47

doque

2,7337 gold badges29 silver badges47 bronze badges

Collectives™ on Stack Overflow

AngularJS + Bootstrap - inject $compiled HTML into popover

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related