I'm facing a unique challenge where I have to nest a template inside another template within my directive. The issue arises because AngularJS doesn't recognize ng-repeat code inside attributes.
In an ideal scenario, here is how I envision my code:
<div ng-repeat="phone in phones">
<button popover="<div ng-repeat='friend in phone.friends'>{{friend.name}}</div>"></button>
</div>
However, this approach fails due to the quotes surrounding the popover attribute. As a result, I find myself exploring the possibility of nesting a template inside another template, as demonstrated in this plunker:
http://plnkr.co/edit/ZA1uA1UOlU3cCH2mbE0X?p=preview
Here's the structure:
<div my-popover></div>
And the corresponding Javascript:
angularApp.directive('myPopover', function( $compile) {
var getTemplate = function()
{
var scope = {title: "other title"};
var template = "<div> test template. title: {{title}}</div> ";
return $compile(template)(scope);
}
return {
restrict: 'A',
template: '<button class="btn btn-default" popover="{{content}}" popover-title="title">template</button>',
link: function(scope) {
scope.content = getTemplate();
}
};
})
Unfortunately, I'm encountering issues with circular references in AngularJS. Any assistance would be greatly appreciated. (I've been grappling with this all day)