Question

让我们假设我想做一个测验页面。我有不同的问题类型。即任务是找到正确的顺序，选择一个答案，选择多个答案，或用预定义的单词填充一些空格等等。所以，我的数据背景中有5个问题。其中2个是多项选择，1个是正确的顺序问题，另外2个是完整的。重点是：我不知道当前测验中有多少不同的问题类型。所有这些都需要一个自己的视图，一个自己的控制器和一个自己的数据模型，因为没有通用的数据模型同时适用于完整性和正确的顺序问题（纠正我，如果我错了）。

一般来说AngularJS和MVC模式的最佳方法是什么？这甚至适用吗？这一般与MVC模式相矛盾吗？

Answer 1

所以你有5个问题，我会针对问题进行ng-repeat，并针对你想要的每个观点进行ng-switch。

<div ng-repeat="question in questions" ng-switch="question.questionType">
  <div ng-switch-when="MultipleChoice" ng-controller="MultipleChoiceCtrl">
    ... multiple choice
  </div>
  <div ng-switch-when="RightOrder" ng-controller="RightOrderCtrl">
    ... right order
  </div>
</div>

Answer 2

我们这样做的方法是从数据开始。我们的大多数部分只有一种类型的问题，但有几种可能有两种或更多类型的问题。每个问题类型都有一个factory，它可以采用以XML格式开头的JSON，并通过转换过程运行并添加所有＆＃34;钩子＆＃34;每个问题都需要。我们有一个名为"questionBuilder"的内容，用于查看每个部分的questionType属性，并在$injector中查看questionType + 'Factory'。

编辑：当您从亚马逊订购商品时，您可以将构建器视为一样。亚马逊不知道如何制作咖啡壶或一罐网球。它拥有的是一长串供应商，做知道如何制作这些东西。因此，当您从亚马逊订购时，它会在其提供这些东西的工厂列表中拉出可以制作咖啡壶的工厂，并要求工厂提供咖啡壶。然后它将它粘在一个盒子里并运送给你。

Angular就像UPS一样。它不知道或不关心框中的内容。当您到达View时，您会拉出当前您关心的问题框。您的View了解问题类型（就像您知道如何使用咖啡壶，或者您可以找到）。

方便的是，Angular也像供应商列表（或$ injector是）。 $ injector注入的任何东西，你可以在你的构建器中拉出来，这就是你可以拥有你需要的任何工厂的方法，而不会用一堆逻辑来破坏代码，以便对特定工厂的依赖项进行硬编码。您正在查看工厂的$ injector，它与数据中指定的问题类型相匹配。

如果该部分中有多个问题类型，我们放下＆＃34;复合＆＃34;对于questionType。 compositeFactory查看每个问题的属性，以确定在工厂的$injector中查找的位置。它还会查看该部分中的信息，该部分告诉它为每个问题添加一个属性，该问题告诉在ng-include中使用的部分视图。

每个问题类型都有自己的功能目录，其中包含一个模块，该模块说明哪些路径与该功能的视图匹配（我们的一些问题类型根据客户需求有不同的变化）。复合特征具有单一视图，基本上只是拉入先前在工厂中添加的ng-include部分。部分可能直接来自其中一个功能目录，也可能是其中一个功能指令的包装器，具体取决于我们需要的内容以及最初构建它的方式。

AngularJS：不同的视图和不同的数据控制器

2 个答案: