在 Angular 中设置上下文范围

Question

我在控制器中将变量绑定到this，在我的路由指定中我使用controllerAs: 'game'。这使我可以使用{{game.var}} 将它们包含在我的HTML 中。有时，我绑定了我想显示的对象，但这迫使我重复编写{{game.object.a}}、{{game.object.b}}、{{game.object.c}}。

在之前使用 Meteor 的项目中，我可以使用 with 关键字设置数据上下文。

{{#with object}}
  {{a}}
  {{b}}
{{/with}}

但我在 Angular 中没有看到与此类似的功能。我能做的最接近的工作是添加属性ng-repeat="object in [game.object]"。这行得通，但它不是很语义化。这也导致我在game.object 更改时快速闪现第二个元素，因为新元素会在第一个元素被擦除之前加载。

这个问题有更好的解决方案吗？

Answer 1

Angular 有意使用这个上下文作用域来避免父作用域和子作用域之间的混淆。如果您不使用子范围，则可以完全跳过控制器作为语法，只需将所有内容绑定到模型中的 $scope，这会将 game.a 和 game.b 在您的视图中变为 a 和 b .

如果您使用的是子作用域，您仍然可以跳过 controllerAs，但随后会混淆视图中给定模型属于哪个控制器。没有with 或using 语法，因此您需要在引用这些模型的任何地方声明绑定范围game.a、childGame.a，这可能过于冗长但至少很清楚。

也请参阅this post。

关于 flash 问题，我会避免将 ng-repeat 用于语义目的。它的主要用例是显示结构相似的数据数组。