49

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?

Improve this question
7
  • The solution is to not use markup and CSS with strict structural requirements. What does mail do exactly? Most likely mailbox has to absorb its functionality and the whole template. Commented Feb 9, 2016 at 11:40
  • I want each mail be the separate component Commented Feb 9, 2016 at 12:44
  • That's the work for directives, not components. Components are meant to be self-contained UI widgets, read more on Web Components. Commented Feb 9, 2016 at 13:08
  • 1
    @estus though I generally agree with the sentiment, that's not necessarily true, think of the option element that doesn't stand alone without a select element around it Commented Feb 9, 2016 at 13:22
  • Don't use tr. Problem solved. A list of mails is not tabular data, so using table is semantically wrong anyway. Commented Feb 9, 2016 at 14:30

1 Answer 1

Reset to default
25

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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Attributes are also not possible for components, if I understand the docs correctly. "restrict: No (restricted to elements only)"
@PatrickKelleter the wording you are using only causes confusion. Components are NOT directives, directives ARE NOT part of Angular2 plain and simple, to say a component is a directive only confuses people
@BrianOgden what i said is that the OLD elment-directives (ng1, restrict:' E') are now known as components in ng2 - while the OLD attribute-directives (ng1, restrict: 'A') are not known as directives in ng2. and YES - there ARE directives in ng2. saying that directives are not part of ng2 is wrong - plain and simple. check out the documentation for it angular.io/docs/ts/latest/guide/attribute-directives.html
I must say I moved back to a table/tr/td setup for a page where I needed .... a table :). Any it works quiet nice to define the width once in the TH and all TD's follow suit. I find that still harder to do with Divs. You have to use a bit more CSS magic I guess.
When you print a page, a browser repeats the thead on the top of all pages. How do you achieve that with divs?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.