1

Angular.dart のようにコンポーネントを作成すると

library main;

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

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

@NgComponent(
    selector: 'my-component',
    publishAs: 'ctrl',
    applyAuthorStyles: true,
    template: '''<div ng-repeat="value in ctrl.values"><span>{{value.name}}</span> - <content><content></div>'''
)

class MyComponent {
  List<Item> values = [new Item('1'), new Item('2'), new Item('3'), new Item('4')];

  MyComponent() {
    print('MyComponent');
  }
}


class MyAppModule extends Module {
  MyAppModule() {
    type(MyComponent);
  }
}

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

そしてそれを次のように使用します

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
  </head>

  <body>

    <h3>Repeat</h3>
    <my-component>
      <div>some provided content to repeat</div>
    </my-component>

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

私は得る

ここに画像の説明を入力

<content>タグが Web コンポーネントでそのように機能しないことはわかっています。

<div>しかし、子要素として提供された要素を繰り返すために、コンポーネントで実行できる他の方法はありますか?

4

2 に答える 2

1

私には答えがありません。今は私の提案をテストすることはできませんが、要素、コンパイラ、スコープ、およびブロック ファクトリを MyComponent に挿入してみてください。

Element element;
Compiler compiler;
Injector injector;
Scope scope;

MyComponent(this.element, this.compiler, this.injector, this.scope) {
}

「要素」の子としてdivにアクセスできます。

次に、NgComponent のテンプレートを使用しませんが、代わりに文字列から独自のテンプレートを作成し、子を挿入してコンパイルします。

String template = '''<div ng-repeat="value in ctrl.values"><span>{{value.name}}</span> - <div id="inner"><div></div>''';

void onShadowRoot(ShadowRoot shadowRoot) {
  List<DivElement> children = element.children;
  shadowRoot.appendHtml(template);    
  DivElement inner = shadowRoot.querySelector('#inner');
  inner.children.add(children);  
  BlockFactory fact = compiler([shadowRoot]);
  Scope childScope = scope.$new();
  Injector childInjector = 
      injector.createChild([new Module()
      ..value(Scope, childScope)]);
  fact(childInjector, children);
}

多分それはあなたに正しい方向を与えるでしょう。

于 2014-01-18T19:08:35.463 に答える