我在 Angular 中遇到了我没有预料到的行为,这篇文章的目的是找出这是一个错误还是有意为之,并可能解释为什么这样做。
首先看看这个Plunker:http://plnkr.co/edit/CB7k9r?p=preview 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 http://plnkr.co/edit/68Mfux?p=preview)在列表周围有一个额外的 div,ng-switch 移动到这个 div,ng-switch-when 从 li 移动到 ul(分离 ng-repeat 和 ng-switch-when)确实按预期工作。
有人可以解释这是为什么吗?
它是“有意的”,因为它是 Angular 如何处理 ng-repeat 的产物。本质上,标记的多个副本被克隆(ng-repeat 内的标记用作模板),并为您正在迭代的每个元素单独编译。因此,Angular 基本上是编译 3<li ng-switch-when='1' ....>
and 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 逻辑之后(结构方面,内部)使用指令。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)