AngularJS 1.5 components in tables [duplicate]

Question

It looks like there is no "replace" option in new AngularJS 1.5 Component concept (like it was for directives).

What would you suggest if I want to have table row <TR> element as component? Is it not possible in terms of valid HTML?

Real example: mailBox component has mail components inside. By markup mail-box-component is table, and mail-box is tr.

<mail-box>
    <mail ng-repeat="mail in $ctrl.mails" mail="mail"></mail>
<mail-box>

---

UPD: related discussion about directives - Why is replace deprecated in AngularJS?

Answer 1

This is not possible the-angular-way anymore since the replace: true flag has been deprecated

Why is replace deprecated in AngularJS?

the replace: true flag had come up with more problems than solutions which is why it was removed. therefore you can not build directives in such a way anymore and provide valid table-tr-td markup.

However, there are two reasons why this is not as bad as it looks:

1. you can do everything you want to do without table, tr, td, etc. just using elements like div, span, etc. and some css on it

2. web-components (and directives were a first attempt to simulate them) are not meant to represent such small fragments of the markup. they are more thought of as a fully functional component actually doing something. so whatever you want to do with your tr that you think it's worth building an element-directive around it, it probably isnt.

Maybe, what you can do is using an attribute-directive instead:

<tr my-mail-directive></tr>

and your my-mail-directive does the magic on the tr element