Transclude partial table in directive

[juerge...@googlemail.com]

Hi there,

I'm currently stuck in getting a directive to render a HTML table. Here is what I want to do: The directive iterates over a list of items and for each item, it creates a new table row and the first column of the row. The rest of the columns should be taken from the body elements that were provided by the user of the directive. Here is an example:

   <table>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
    <tbody tree-list items="treelist" selection="selection">
        <td>{{item.id}}</td>
        <td>{{item.label}}</td>   
    </tbody>
  </table>

and this is the directives template:

<tr ng-repeat="item in itemlist" ng-class="rowClass" ng-show="isVisible(item)"> 
  <td ng-class="leadoffClass">
    {{item.label}}
   </td>
 
   <span class="dynamic" ng-transclude></span>
</tr>

The problem is that angular does not seem to render the table cells that come from the directive. Is there some obvious problem here?

Regards,

Jürgen

[Sander Elias]

Hi Jürgen,

Does it not render the cells, or are there empty cells? It would be much easier to help you if you would provide a plunker!

Regards

Sander

[juerge...@googlemail.com]

Since I have never set up an example with plunker I shyed away from it as I did not know how to set up the directives and all that stuff.
But you are right, I should definitly learn how to set up examples via plunker..

What happened in my application is that (depending on the HTML element the ng-transclude was attached to) the browser (firefox in this case)
seemed to insert those elements into the DOM that it seemed most fitting. If I used a span, the table cells from the transcluded code turned into
simple text nodes. If I used a td for transclution, the td's remain but got an extra tr around them, So, I guess the problem is not on angulars side
but rather on the browser that tries to turn invalid HTML into valid HTML. Therefore, the only solution I could see would have a transclude directive
that removes the transclution element itself. But if I understand the inner workings of angularjs correctly, the enclosing element is needed to keep
the scope correct?

Anyway, I completely changed my directive such that I do not need to generate potentially incorrect HTML and that seems to work nicely and it
also looks better from the  usage point-of-view.

Thanks for your anwser.

Regards,

Jürgen

[juerge...@googlemail.com]

To round things up, I have managed to create a plunkr that illustrates the problem http://plnkr.co/edit/DBVRfaXwJ1CZFolUTwO1
In the example, I would expect a valid HTML table layout. The result however (if you look at it using the "Inspect Element" functions
of either Chrome or Firefox) is a tr with a span and the content are just text nodes...