角度的动态部分

Question

我有一个角度应用程序，列出了用户要服务的项目，一个待办事项列表。每个待办事项都需要不同的字段来完成任务。制作待办事项清单很简单。我的问题是如何让每个待办事项扩展以显示一组不同的“子部分”？见下图：

+---------------------------------------------------------+
| To do #1                                                |
+---------------------------------------------------------+
| To do #2                                                |
+---------------------------------------------------------+
| To do #3                                                |
+---------------------------------------------------------+

用户点击以展开第一个待办事项：

+---------------------------------------------------------+
| To do #1                                                |
|                                                         |
| +--------------+  +--------------+  +--------------+    |
| | partial A    |  | partial B    |  | partial C    |    |
| +--------------+  +--------------+  +--------------+    |
+---------------------------------------------------------+
| To do #2                                                |
+---------------------------------------------------------+
| To do #3                                                |
+---------------------------------------------------------+

用户扩展第二个待办事项：

+---------------------------------------------------------+
| To do #1                                                |
+---------------------------------------------------------+
| To do #2                                                |
|                                                         |
| +--------------+  +--------------+  +--------------+    |
| | partial A    |  | partial D    |  | partial E    |    |
| +--------------+  +--------------+  +--------------+    |
+---------------------------------------------------------+
| To do #3                                                |
+---------------------------------------------------------+

通常，其中一个子部分可能有3-10个字段。请注意，其中一些是重复使用的，但每个待办事项中的一些会有所不同。我希望有大约30个子部分。

这样的事情可以在Angular中以干净的方式进行吗？我一直在寻找ui-router，但我不知道它可以为每个待办事项做不同的设置。还有其他方法或更好的方法吗？欢迎任何建议。

如果可能的话，我也想动态加载控制器，但这是次要的主要目标。

如果有必要，我可以在模态弹出对话框中显示所选的待处理子部分，而不是展开。

Answer 1

我在上一个应用中所做的是设置我想要加载为$scope变量的子部分的名称，然后在ng-include中使用该变量。

.when('/team/:team', {
      'template': "<div ng-include=\"nav.template\"></div>",
      'controller': 'TeamCtrl',
 }

然后在我的控制器某处：

$scope.nav.template = 'app/partials/team/' + $routeParams.team + '.html';

这让我可以快速扩展想要链接的团队数量，而无需更改我的代码并单独添加每个团队。我认为这个逻辑可以扩展到符合你的要求。

请注意，在我的示例中，整个事情都在路由器中设置，但您也可以从控制器执行此操作，并将动态ng-include设置在另一个部分内。