当在同一元素上使用ng Include时,重复动画不起作用

时间:2013-11-25 12:33:24

标签: javascript angularjs angularjs-ng-repeat ng-animate angularjs-ng-include

测试用例:http://plnkr.co/edit/dsG3gxFomAK8Q15Xfouj?p=preview

上面的测试用例是使用ng-repeat指令呈现的数据列表,两次。一次不使用ng-include,一次使用ng-include

ng-repeat指令支持的所有三个(输入离开移动)动画设置CSS过渡。当使用ng-include时,所有三个动画都能正常工作,但只有输入动画才能使用ng-include加载每个项目的模板列表。

我很确定这是angular-animate的错误,但不确定。使用ng-repeatng-include组合时,我可能会做错事。我尝试挖掘angular-animate源代码并修复问题,但不能。我想的(希望是真的)是ng-include指令在ng-repeat呈现的每个项目的正上方添加了一个注释节点,这个节点正在抛弃angular-animate的工作。这也是两种实现之间唯一明显的区别。

请注意,如果没有设置动画,所有功能都可以正常工作。但是在使用ng-include的示例中,不仅动画(用于向上或向下移动项目)搞砸了,而且项目甚至都没有移动。

这是一个错误吗?如果是这样,是否有已知的解决方法?我尝试在github上搜索angular.js的问题,但找不到解决方法(我发现的那些不起作用)。感谢您对此提供任何帮助。

1 个答案:

答案 0 :(得分:1)

  

但是当使用ng-include加载列表中每个项目的模板时,只有输入动画才有效。

我实际上在Chrome中遇到了不一致的行为。有时移动的动画会起作用。

  

如果是,是否有已知的解决方法?

您可以嵌套ng-repeat-ed / ng-include-ed元素,因此指令位于不同的元素上,因此不管是什么原因都不应该有任何冲突。 http://plnkr.co/edit/dVniIVUaGS8y7wHe7CuT?p=preview

上的示例

编辑:修复了plnkr链接。