Question

我在Angular中遇到过我没想到的行为，这篇文章的目的是找出这是一个错误或是否有意，并可能解释为什么这样做。

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

这不会按预期工作，它会显示错误：

Error: Argument '?' is required at assertArg

然而，同样的例子在列表周围用额外的div重写（http://plnkr.co/edit/68Mfux?p=preview），ng-switch移动到这个div，ng-switch-从li移动到ul（分离ng-重复和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逻辑。

ng-switch和ng-repeat对同一元素的干扰

1 个答案: