I have created a directive which uses md-virtual-repeat-container component of angular material.
angular
.module('MyApp')
.directive('myDirective', function() {
var template = document.getElementById("myDirective").innerHTML;
return {
replace: true,
transclude: true,
template: template,
controllerAs: 'ctrl',
controller: function() {
this.items = [];
for (var i = 0; i < 100; i++) {
this.items.push(i);
}
}
}
});
My HTML
<div class="virtualRepeatdemoVerticalUsage" ng-app="MyApp" style="height:100%;width:800px">
<my-directive>
<span>Hello</span>
</my-directive>
</div>
<script type="text/template" id="myDirective">
<div style="height:100%; width:800px;">
<md-virtual-repeat-container id="vertical-container" layout="column" style="background-color:yellow;height:100%;width:100%;min-height:0px">
<div md-virtual-repeat="item in ctrl.items" class="repeated-item" style="background-color:orange;width:100%">
{{item}}
<ng-transclude></ng-transclude>
</div>
</md-virtual-repeat-container>
</div>
</script>
The issue is when i am running this code i am getting
Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found
Which makes sense since the ng-trasclude is becoming a part of md-virutal-repeat-container and it doesn't have trasclude property set.
What I have tried so far:
I have tried creating a separate child directive of my current directive and set transclude property to true but to add that child again I need to add ng-transclude to 'myDirective' directive which brings me back to same issue.
I tried replacing the content in prelink function but the md-virtual-repeat removes the content before prelink and I am not able to access the content where i have to replace the transcluded element. Everything is fine in compile function but i don't have access to transcluded element in compile function.
Source of virtual repeat container
I have created a codepen for this. Please play around with it and see if you can get through it.
Thanks in advance.