1

是否可以创建一个可以用作表格行（或 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>

如果没有，有没有办法实现类似的东西？

谢谢，

罗伯特

4

1 回答 1

2

这是你想要的？

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>不会接受这样的标签作为内容，所以我调整了聚合物如何使用 selector 定义扩展的 DOM 元素'tr[is=my-tr]'。在 Angular 中，只要标签名称为tr.

您可以在此GitHub 存储库中找到项目的源代码- angular_playground

结果截图

结果截图

于 2014-01-14T15:35:24.583 回答