Пытаюсь реализовать вкладки в AngularDart

Я пытаюсь изучить 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>

При запуске ctrl.panes в component/tab_component.html пуст, поэтому список имен вкладок не отображается. Я могу просмотреть код и увидеть, как панели добавляются в список в экземпляре TabComponent, а атрибут имени устанавливается в двух экземплярах TabPanelComponent.

Я чувствую, что я близок, но упускаю что-то очевидное. Любые указатели или советы, которые кто-то может предложить, чтобы помочь новичку в Dart, будут оценены.


dart angular-dart
person S Wheeler    schedule 11.12.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

В аннотации NgComponent для TabComponent отсутствовал параметр видимости. Значение по умолчанию следует изменить на 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 {
...
person S Wheeler    schedule 12.12.2013
comment
Что означает CHILDREN_VISIBILITY? - person Seth Ladd; 11.01.2014
comment
Я видел, что у нас есть два голоса за этот ответ. Когда я только что попробовал это, все, что я вижу, это: Содержимое вкладки betty Содержимое вкладки bob - person will; 08.03.2014
comment
... Я попробовал еще несколько вещей. Не работает для меня. Я думаю, что показанный пример немного смещен от центра. :-) - person will; 08.03.2014
comment
Я только что попробовал это снова, и, похоже, это работает, но я не эксперт по Dart :-) Я разместил Gist со всеми моими рабочими файлами. - person S Wheeler; 10.03.2014

arrow_upward
0
arrow_downward

Мне удалось реализовать рабочий компонент вкладки. Дело в том, что ваш подход и мой подход настолько похожи, что я не вижу между ними разницы. Тем не менее, вот мое рабочее решение: код на GitHub

person Stephan Rauh    schedule 29.04.2014