Question

我正在编写一个桌面游戏中心作为个人项目，以学习/发现有关AngularJS的更多信息。

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

如果你能提出一个更优雅的解决方案，这不需要这个黑客的东西，我会很高兴听到它。

Answer 1

我认为我有一个非常好的解决方案。为您目前拥有的两款游戏中的每一款游戏构建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而不是提取它的主要罪行......”

如何有条件地放置AngularJS指令？

1 个答案: