Question

所以我正在开展一个项目，我根据使用angular的模板加载一些下拉面板（在项目中称为＆＃34; facets＆＃34;），并且仅在某些浏览器/硬件组合上加载切面两次并删除第二对。这是一段视频，展示了正在发生的事情：

https://drive.google.com/open?id=0BywtASGJVCWmYXpSbE1zV3QxanM

（抱歉格式）。有趣的是，这只发生在视频中的Chrome安装上（也就是说，我使用安装在不同计算机上的相同Chrome版本对其进行了测试，并且它没有重现错误）和我自己的计算机上安装的IE 11和Edge。我为构造函数添加了console.log("made a multiselect facet")以获得某种类型的构面（显然是多选），并检查它的打印次数。这是左边的Edge输出和右边的Firefox Developer Edition的图片：

所以你可以看到，在页面加载过程中，facet创建了两次但只在Edge上创建（因为输出的两倍）。我已经确认控制器脚本没有运行两次，并且＆＃34;创建搜索条件＆＃34; bit，所以必须在元素实际添加到文档时发生（我认为）。这是我的页面模板（无论如何相关部分）：

<md-card ng-repeat="facet in directory.criteria.Facets track by $index">
    <multi-Facet facet="facet"
        clear-action="directory.clearFilter(facet)"
        apply-action="directory.applyFilter(facet)"
        ng-if="directory.isMultiselectFacet(facet)"></multi-Facet>
    <ranged-Facet facet="facet"
        clear-action="directory.clearFilter(facet)"
        apply-action="directory.applyFilter(facet)"
        ng-if="directory.isRangeFacet(facet)"></ranged-Facet>
</md-card>

因为它超长并且我不知道它是否有用，我已将控制器包含为pastebin：http://pastebin.com/xNQUfZqs与实际模板一样方面：http://pastebin.com/VcQHGp8L及其控制器：http://pastebin.com/PHfNEEn4

一些注意事项：控制器都是打字稿，而不是javascript。此外，这是与angular.js github上的问题＃6006相关的 NOT ，因为除非我非常误以为这是固定的1.5.6版角度，这是一个我有。可根据要求提供任何其他信息。

提前致谢！

Answer 1

最后始终使用track by $index短语ng-repeat，如下所示

<md-card ng-repeat="facet in reqMan.criteria.Facets | orderBy:'DisplayOrder' track by $index">

为什么要防止重复？正如官方docs所说，

为了最大限度地减少DOM元素的创建，ngRepeat使用一个函数来“跟踪”集合中的所有项及其相应的DOM元素。例如，如果项目被添加到集合中，则ngRepeat将知道所有其他项目已经具有DOM元素，并且不会重新呈现它们。

我不知道这里重复的原因是什么，但track by $index阻止了它们。

您可以对track by $index使用ng-repeat，不仅可以防止重复，还可以提高性能。再次参考文档，

如果您正在处理具有标识符属性的对象，则应按标识符而不是整个对象进行跟踪。如果您以后重新加载数据，ngRepeat将不必为已经呈现的项重建DOM元素，即使集合中的JavaScript对象已替换为新对象。对于大型集合，这可以显着提高渲染性能。如果您没有唯一标识符，则按$ index跟踪也可以提高性能。

希望这能回答你的问题。

角度项加载两次，但有时只加

1 个答案: