3

我正在编写一个棋盘游戏中心作为个人项目，以了解/发现有关 AngularJS 的更多信息。

我尝试了一个通用的实现，所以我有一个显示方形网格和通用控制器的通用部分，所有实际的游戏逻辑都驻留在服务中。我已经为我实现的每个棋盘游戏编写了一个这样的服务（目前是 2 个）。我无法以通用方式解决的一件事是网格中的一个单元格。根据游戏的不同，它的内容可能是一个字母、一个数字、一张图片，甚至是一些（相当复杂的）HTML。我可以使用一个 getter 函数，它会调用服务，它会为每个单元格组装 HTML，但这感觉真的不是 Angular-ish。所以我想为每种类型的单元格定义一个指令。如何有条件地在页面中放置指令（基于游戏类型，在控制器中决定）？

如果你能想出一个更优雅的解决方案，它不需要这种 hack-ish 的东西，我会很高兴听到它。

4

1 回答 1

3

我想我有一个很好的解决方案。为您目前拥有的两个游戏中的每一个构建一个 UI 的 HTML 模型。将单元格、样式、图像等放在一起。它们不一定是完美的，但它们应该近似于你看到它们的构建方式。

现在尝试统一它们的 HTML，使它们在幕后尽可能相似，并且这种共性应该向您建议前端所需的部分。例如，假设您已经完成了一个非常无聊的老游戏，例如国际象棋（而不是像东京之王或卡尔卡松这样有趣的游戏：），并且您看到您有单独的方块可以很好地用作 div。

<table>
  <tr ng-repeat="row in board">
    <td ng-repeat="square in row">
      <div ng-class="square.class()"><img ng-src="square.img()"/></div>
    </td>
  </tr>
</table>

每个方块都为其样式提供一个类和一个透明的 PNG 文件，该文件可以在那里显示以显示方块上的不同棋子。这是一个想法。但它可能对您的游戏完全失败，因为它缺少您需要的交互或动画或其他对您尝试创建的用户体验至关重要的东西。

最终，您必须从 UI 向后工作，而不是从您认为 API 应该看起来的样子向前工作。我将引用 Tom Dale 谈论 Ember Data 的话说，“我们犯下了发明 API 而不是提取 API 的大罪……”

于 2013-05-30T15:18:07.483 回答