AngularJS中的自定义小部件

Question

我有一个HTML小部件列表，这些小部件是从像这样的服务器数据动态创建的（Jade）：

.area(ng-repeat="widget in widgetsList.widgets")
    h3 {{widget.title}}
    p {{widget.type}}
    span {{widget.data}}

小部件的结构不同，我不希望它们在视觉上相同，因为每个小部件都代表它自己的功能。示例末尾的段落只是将数据json作为字符串放置，我显然需要根据其类型看起来像'important-messages-widget'或'recent-events-widget'来呈现为正确的html小部件。 / p>

Angular看起来很不错，但缺乏详细的文档。我应该如何管理这个案子？

Answer 1

在Angular中，有两个内置指令，这些指令实际上是使角度太强大的原因。

1. ng-repeat（您已经在使用）

2. NG-开关 这似乎是大多数开发人员经常被误解或不被理解的东西。它以html中的普通编程语言为您提供switch语句的强大功能。

http://docs.angularjs.org/api/ng.directive:ngSwitch

它的文档应该为你提供一个很好的起点。将ngSwitch与ng-repeat结合使用将为您提供一种非常强大的方式来表示您的观点。

<div ng-switch on="widget.type" >
    <div ng-switch-when="important-messages-widget">Important Message</div>
    <div ng-switch-when="recent-events-widget">Recent Events ---add more html here </div>
</div>

希望这有帮助。