努力在AngularDart中实现选项卡

时间:2013-12-11 22:35:46

标签: dart angular-dart

我正在尝试学习Dart和AngularDart。最初一切都很好,直到我决定尝试基于类似于Angular主页的示例来实现选项卡组件,例如。

<tab>
  <panel name="betty">
  Content of betty tab
  </panel>
  <panel name="bob">
  Content of bob tab
  </panel>
</tab>

我已经实施了以下组件。

@NgComponent(
    selector: 'tab',
    templateUrl: 'components/tab_component.html',
    cssUrl: "http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css",
    publishAs: 'ctrl'
)
class TabComponent {

    List<TabPanelComponent> panes = new List();

    add(TabPanelComponent tab) {
      panes.add(tab);
    }
}

@NgComponent(
    selector: 'panel',
    templateUrl: 'components/tab_panel.html',
    publishAs: 'ctrl',
    map: const {
      'name': '@name'
    }
)
class TabPanelComponent {

  String name;
  TabComponent tab;

  TabPanelComponent(this.tab) {
    tab.add(this);
  }
}

以下html模板

组件/ tab_component.html

<div class="tabble">

  <ul class="nav nav-tabs">
    <li ng-repeat="pane in ctrl.panes"><a href="#">{{pane.name}}</a></li>
  </ul>

  <div class="tab-content">
    <content></content>
  </div>

</div>

组件/ tab_panel.html

<div class="tab-pane">
  <content></content>
</div>

运行时,components / tab_component.html中的ctrl.panes为空,因此不会显示选项卡名称列表。我可以单步执行代码,看到窗格被添加到TabComponent实例的列表中,而name属性是在TabPanelComponent的两个实例中设置的。

我觉得我很亲密,却遗漏了一些明显的东西。任何有人可以提供帮助Dart新手的指示或建议都将受到赞赏。

2 个答案:

答案 0 :(得分:2)

TabComponent的NgComponent注释缺少可见性选项。这应该从默认值更改为CHILDREN_VISIBILITY

@NgComponent(
    visibility: NgDirective.CHILDREN_VISIBILITY,
    selector: 'tab',
    templateUrl: 'components/tab_component.html',
    cssUrl: "http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css",
    publishAs: 'ctrl'
)
class TabComponent {
...

答案 1 :(得分:0)

我设法实现了一个工作标签组件。事实是,你的方法和我的方法是如此相似,我没有看到它们之间的区别。尽管如此,这是我的工作解决方案: code at GitHub