我正在编写一个棋盘游戏中心作为个人项目，以学习/发现有关 AngularJS 的更多信息。
我试图寻求一个通用的实现，所以我有一个显示方形网格和一个通用 Controller 的通用部分，所有实际的游戏逻辑都驻留在一个服务中。我已经为我实现的每个棋盘游戏编写了一个这样的服务(目前是 2 个)。我无法以通用方式解决的一件事是网格中的单元格。根据游戏的不同，它的内容可能是一个字母、一个数字、一张图片，甚至是一些(相当复杂的)HTML。 我可以使用一个 getter 函数，它会调用服务，它会为每个单元格组装 HTML，但这感觉真的不是 Angular-ish。 所以我想为每种类型的细胞定义一个指令。如何在页面中有条件地放置指令(基于游戏类型，在 Controller 中决定)？
如果您能想出一个更优雅的解决方案，不需要这种骇人听闻的东西，我会很高兴听到。
最佳答案
我想我有一个很好的解决方案。为您目前拥有的两款游戏中的每款游戏构建 UI 的 HTML 模型。将单元格、样式、图像等放在一起。它们不一定是完美的，但它们应该近似于您看到它们的构建方式。
现在尝试统一它们的 HTML，使它们在幕后尽可能相似，并且这种共性应该向您建议前端需要哪些部分。例如，假设您玩过一个非常无聊的老游戏，例如国际象棋(而不是像东京之王或卡尔卡松这样有趣的游戏:)，并且您看到您有独立的方 block ，可以很好地用作 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>
每个方 block 都提供了一个样式类和一个透明的 PNG 文件，可以在那里显示以显示方 block 上的不同棋子。这是一个想法。但对于您的游戏来说，它可能会完全失败，因为它缺少您需要的交互或动画或其他对您尝试创建的用户体验至关重要的东西。
最终，您必须从 UI 向后工作，而不是从您认为 API 的外观开始。我将引用 Tom Dale 谈论 Ember Data 的话，“我们犯了发明 API 而不是提取它的主要错误......”
关于javascript - 如何有条件地放置 AngularJS 指令？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16839201/