12

我在 Angular 中遇到了我没想到的行为，这篇文章的目的是找出这是一个错误还是有意为之，并可能解释为什么它是有意的。

首先看到这个 Plunkr：http ://plnkr.co/edit/CB7k9r?p=preview 。在示例中，我创建了一个名为 array 的数组，其中包含三个对象条目。此外，我根据输入字段的内容（称为切换）创建了一个 ng-switch。当 toggle 的值为 1 时，它应该打印数组中所有以“1”为前缀的对象名称，否则以“other”为前缀。

这不能按预期工作，并显示错误：

Error: Argument '?' is required at assertArg

然而，相同的示例重写（http://plnkr.co/edit/68Mfux?p=preview）在列表周围有一个额外的 div，ng-switch 移动到这个 div 和 ng-switch-when 从 li 移动到ul（将 ng-repeat 和 ng-switch-when 分开）确实按预期工作。

有人可以解释这是为什么吗？

4

1 回答 1

18

这是“有意的”，因为它是 angular 如何处理 ng-repeat 的产物。本质上，标记的多个副本被克隆（ng-repeat 中的标记用作模板）并为您正在迭代的每个元素单独编译。因此，angular 基本上是在编译 3<li ng-switch-when='1' ....>和 3 <li ng-switch-default ....>，但是这样做是脱离上下文的——没有 ng-switch-on 元素可以比较。

您可以通过检查生成的标记来看到这种情况：

<ul ng-switch="" on="toggle">  
  <!-- ngRepeat: entry in array -->
  <!-- ngSwitchWhen: 1 -->
  <!-- ngSwitchWhen: 1 -->
  <!-- ngSwitchWhen: 1 -->
  <!-- ngRepeat: entry in array -->
  <!-- ngSwitchDefault:  -->
  <!-- ngSwitchDefault:  -->
  <!-- ngSwitchDefault:  -->        
</ul>

这两个指令 - ng-repeat 和 ng-switch - 都应该小心处理，因为它们（与 ng-show 或 ng-hide 不同）严重影响结构。第二个（工作）Plunker 是要走的路 - 只在 ng-switch 逻辑之后（结构方面，内部）使用指令。

于 2013-03-15T13:46:55.453 回答