是否可以为单个表格行创建组件？答案

【问题标题】：Is it possible to create a component for a single table row?是否可以为单个表格行创建组件？
【发布时间】：2014-01-20 21:48:28
【问题描述】：

是否可以创建一个可以用作表格行（或 tbody）的 Angular Dart 组件？我想做这样的事情：

<table>
  <my-component ng-repeat="value in ctrl.values" param="value"></my-component>
</table>

不是很丑：

<table>
  <tr ng-repeat="value in ctrl.values"> ...(here some td's)...</tr>
</table>

如果没有，有什么办法可以达到类似的效果吗？

谢谢，

罗伯特

【问题讨论】：

我用一个 Angular 示例更改了我的 Polymer。

标签： dart angular-dart

【解决方案1】：

这是你要找的吗？

library main;

import 'package:angular/angular.dart';
import 'package:di/di.dart';

class Item {
  String name;
  Item(this.name);
}

@NgComponent(
    selector: 'tr[is=my-tr]',
    publishAs: 'ctrl',
    visibility: NgDirective.CHILDREN_VISIBILITY,
    applyAuthorStyles: true,
    template: '''<content></content><span>{{ctrl.value.name}}</span><span> - </td><td>{{ctrl.value}}</span>'''
)
class MyTrComponent extends NgShadowRootAware{
  @NgTwoWay('param') Item value;

  MyTrComponent() {
    print('MyTrComponent');
  }

  @override
  void onShadowRoot(ShadowRoot shadowRoot) {
    var elements = new List<Element>.from(shadowRoot.children.where((e) => !(e is StyleElement) && !(e is ContentElement)));
    ContentElement ce = shadowRoot.querySelector('content');
    elements.forEach((e) {
      e.remove();
      var td = new TableCellElement();
      td.append(e);
      print('append: ${e.tagName}');
      ce.append(td);
    });
  }
}

@NgController(
  selector: "[ng-controller=row-ctrl]",
  publishAs: "ctrl",
  visibility: NgDirective.CHILDREN_VISIBILITY
)
class RowController {
  List<Item> values = [new Item('1'), new Item('2'), new Item('3'), new Item('4')];
  RowController() {
    print('RowController');
  }
}

class MyAppModule extends Module {
  MyAppModule() {
    type(MyTrComponent);
    type(RowController);
  }
}

void main() {
  ngBootstrap(module: new MyAppModule());
}

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular playground</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <h1>Angular playground</h1>

    <p>Custom TableRow</p>

    <table ng-controller="row-ctrl"  >
      <tr is="my-tr" ng-repeat="value in ctrl.values" param="value"></tr>
    </table>

    <script type="application/dart" src="index.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

不可能使用像<my-component> 这样的另一个标签名称，因为<table> 不接受这样的标签作为内容，所以我调整了聚合物使用选择器'tr[is=my-tr]' 定义扩展DOM 元素的方式。在 Angular 中，只要标签名称为 tr，其他选择器就可以了。

您可以在GitHub repo - angular_playground

找到项目的源代码

结果截图

【讨论】：

对不起，我完全错过了这是 Angular 而不是 Polymer。我不知道从 DOM 元素派生在 Angular 中是如何工作的。
是的，我确实需要 Angular Dart :-)
很长一段时间以来，我一直计划尝试创建一个扩展表格 DOM 元素 (table, td, tr, th, ...) 的聚合物元素是否有效，现在正如你所问的那样，我认为“只是试试看'。我也很好奇如何在 Angular 中做到这一点，但还不知道。
它看起来不适合我，因为标签和在使用模板时似乎被删除了。你试过它是否有效吗？或者也许我做错了什么......
不幸的是，这不起作用。请看一下屏幕截图的 DOM Inspector 部分。每行应该包含 3 个单元格，但它确实只包含一个文本节点，所有文本都挤在一起。