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

Using this directive:

.directive('popover', function($pile){
    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 unpiled, raw html and not a rendered angular template:

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 $pile( (element).siblings(".pop-content").html() )(scope) as content but results in pletely empty popovers.

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

Using this directive:

.directive('popover', function($pile){
    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 unpiled, raw html and not a rendered angular template:

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 $pile( (element).siblings(".pop-content").html() )(scope) as content but results in pletely empty popovers.

• javascript
• angularjs
• twitter-bootstrap
• twitter-bootstrap-3
• popover

2 Answers 2

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

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

JSFiddle

I was able to find the answer. One needs to pass scopeas a parameter to the function returned by $pile:

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

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

        $(element).popover({
            html: true,
            placement: "top",
            content: $pile(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>