努力在AngularDart中实现选项卡

我正在学习Dart和AngularDart。最初，所有的都很好，直到我决定尝试实现基于类似于Angular主页的示例的选项卡组件，例如，努力在AngularDart中实现选项卡

<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/tab_component .html为空，因此不会显示标签名称列表。我可以浏览代码并查看添加到TabComponent实例列表中的窗格，并在TabPanelComponent的两个实例中设置name属性。

我觉得我很接近但错过了一些明显的东西。任何人可以提供帮助达特新手指针或建议，将不胜感激。

来源

2013-12-11 S Wheeler

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 { 
...

来源

2013-12-12 06:46:37

CHILDREN_VISIBILITY是什么意思？ –

我看到我们有两个这个答案的投票。当我刚刚尝试时，我看到的只是： “贝蒂标签的内容鲍勃标签的内容” – will

...我尝试了其他一些东西。不为我工作。我认为所示的例子稍微偏离中心。 :-) – will

我已经设法实现一个工作选项卡组件。事情是，你的方法和我的方法非常相似，我没有看到它们之间的区别。尽管如此，这里是我的工作解决方案： code at GitHub

来源

2014-04-29 22:06:52

努力在AngularDart中实现选项卡

回答

相关问题