AngularJS 中的自定义小部件答案

【问题标题】：Custom widgets in AngularJSAngularJS 中的自定义小部件
【发布时间】：2012-08-25 14:38:52
【问题描述】：

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

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

小部件的结构不同，我不想让它们在视觉上相等，因为它们中的每一个都代表着自己的功能。示例末尾的段落只是将数据 json 作为一个字符串，我显然需要根据它的类型将其呈现为适当的 html 小部件，例如“重要消息小部件”或“最近事件小部件”。

Angular 看起来不错，但缺乏详细的文档。我应该如何处理这种情况？

【问题讨论】：

在 AngularJS 术语中，它被称为“指令”。您可能需要重新尝试搜索相关主题。

标签： javascript html pug angularjs

【解决方案1】：

在 Angular 中，有两个内置指令真正让 Angular 变得强大。

ng-repeat（您已经在使用）
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>

希望这会有所帮助。

【讨论】：