When trying to use ng-transclude inside md-virtual-repeat I'm getting Illegal use of ng-transclude directive

Viewed 573

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:

  1. 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.

  2. 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.

0 Answers
Related