Angular Component:没有模板替换选项? [英] Angular Component: no template replace option?

问题描述

新的 AngularJS 1.5 组件概念中似乎没有替换"选项(例如它用于指令).

如果我想将 table row <TR> 元素作为组件，你有什么建议?就有效的 HTML 而言是不可能的吗?

真实示例:邮箱组件内部有邮件组件.通过标记mail-box-component是table，mail-box是tr.

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

<小时>

UPD:关于指令的相关讨论 - 为什么要替换在 AngularJS 中已弃用?

解决方案

自从 replace: true 标志已被弃用后，这不再是可能的角度方式了

为什么 AngularJS 不推荐使用 replace?p>

replace: true 标志提出的问题多于解决方案，这就是它被删除的原因.因此，您不能再以这种方式构建指令并提供有效的 table-tr-td 标记.

然而，这并没有看起来那么糟糕，有两个原因:

1. 你可以做任何你想做的事情，而无需 table、tr、td 等.只需使用 div、span 等元素以及一些 css 就可以了

2. web-components(和指令是第一次尝试模拟它们)并不意味着代表标记的这些小片段.实际上，它们更多地被认为是一个功能齐全的组件做某事.所以无论你想用你的 tr 做什么认为值得围绕它建立一个元素指令，它可能不是.

也许，您可以使用属性指令来代替:

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

而您的 my-mail-directive 对 tr 元素具有魔力

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?

解决方案

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

这篇关于Angular Component:没有模板替换选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！