ng-switch和ng-repeat在同一元素interfearing上

Question

我在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-从li移到ul(将ng-repeat和ng-switch-when分开)确实按预期工作.

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

Answer 1

它是"有意的",因为它是角度如何处理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是要走的路 - 只能使用指令AFTER(结构方面,INSIDE)ng-switch逻辑.