Angular Component:没有模板替换选项?
新的 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 标记.
然而,这并没有看起来那么糟糕,有两个原因:
你可以做任何你想做的事情,而无需 table、tr、td 等.只需使用 div、span 等元素以及一些 css 就可以了
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:
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
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
相关文章