Struggling to implement tabs in AngularDart

问题

I am trying to learn Dart and AngularDart. Initially all was good until I decided to try and implement a tab component based on the example similar to the Angular home page e.g.

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

I have implemented following components.

@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);
  }
}

And the following html templates

components/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>

components/tab_panel.html

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

When run, ctrl.panes in components/tab_component.html is empty, hence the list of tab names are not displayed. I can step through the code and see the panes being added to the list in TabComponent instance and the name attribute being set in the two instances of TabPanelComponent.

I feel that I am close but missing something obvious. Any pointers or advice that someone could offer to help a Dart newbie would be appreciated.

回答1:

The NgComponent annotation for TabComponent was missing the visibility option. This should be changed from the default to 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 {
...

回答2:

I've managed to implement a working tab component. Thing is, your approach and my approach are so similar I don't see the difference between them. Nonetheless, here's my working solution: code at GitHub

来源：https://stackoverflow.com/questions/20531349/struggling-to-implement-tabs-in-angulardart

标签

dart

angular-dart