I am facing an issue with transclusion within the ng-repeat directive in Angular. The problem arises because Angular is unable to find the .transclude element within the template, leading to the replacement not taking place. I suspect that this issue occurs because ng-repeat removes the .transclude before the transclusion process. I am seeking a solution on how to perform the replacement before ng-repeat manipulates the placeholder or any other workaround for this problem.
Side note: If I switch to using the ng-transclude directive, the code works correctly. However, it requires me to access values using $parent {{$parent.item.name}}, which is not ideal for me.
Below is the condensed version of my code:
HTML
<div mydir="items">
{{item.name}}
</div>
template.html
<div ng-repeat="item in items">
<div class="transclude"></div>
</div>
Directive
app.directive("mydir" , function(){
return {
templateUrl : "template.html",
transclude : true,
scope : {
items: "=mydir"
},
link : function($scope , $element , attrs , $ctrl , $transclude){
$transclude(function($content){
$element.find(".transclude").replaceWith($content);
});
},
};
})
Expected Result Before Compilation
<div mydir="items">
<div ng-repeat="item in items">
{{item.name}}
</div>
</div>