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.
2 Answers
Reset to default 4You'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 scope
as 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>