Javascript 角度项目加载两次，但仅有时加载

因此，我正在进行一个项目，在该项目中，我使用angular基于模板加载一些下拉面板（在项目中称为“facets”），并且仅在某些浏览器/硬件组合上，它加载两次facets并删除第二对。下面是一段视频，演示了正在发生的事情：

（对格式问题表示抱歉）。有趣的是，这只发生在视频中的Chrome安装上（也就是说，我用安装在不同计算机上的同一Chrome版本测试了它，它没有重现错误）以及安装在我自己计算机上的IE 11和Edge。我为特定类型的facet（显然是multiselect）的构造函数添加了一个

console.log（“make a multiselect facet”）

，并检查了它的打印次数。左边是Edge输出的图片，右边是Firefox开发者版：

所以您可以看到，在页面加载期间，facet被创建了两次，但只在Edge上创建（因为有两倍的输出）。我已经确认控制器脚本不会运行两次，并带有“创建搜索条件”位，因此它必须在元素实际添加到文档时发生（我认为）。以下是我放置facets的页面模板（无论如何，相关部分）：

因为它是超长的，我不知道它是否有用，所以我将控制器作为pastebin:包含在了facet:及其控制器的实际模板中：

注意：控制器都是typescript，而不是javascript。此外，这与angular.js github上的问题#6006无关，因为除非我非常错误，否则这是从angular的1.5.6版开始修复的，这就是我所拥有的版本。如有要求，可提供任何其他信息

---

提前谢谢

始终在结尾使用

track by$index

短语，并使用

ng repeat

如下所示

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

为什么要防止重复？正如这位官员所说

为了尽量减少DOM元素的创建，ngRepeat使用一个函数“跟踪”集合中的所有项及其对应的DOM元素。例如，如果将一个项添加到集合中，ngRepeat将知道所有其他项都已具有DOM元素，并且不会重新呈现它们

我不知道这里出现重复的原因是什么，但是

track by$index

防止了重复

您可以对每个

ng repeat

使用

track by$index

，不仅可以防止重复，还可以提高性能。再次提到文件

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

---

希望这能回答您的问题。

始终在结尾使用

track by$index

短语，并使用

ng repeat

，如下所示：

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

为什么要防止重复？正如这位官员所说

为了尽量减少DOM元素的创建，ngRepeat使用一个函数“跟踪”集合中的所有项及其对应的DOM元素。例如，如果将一个项添加到集合中，ngRepeat将知道所有其他项都已具有DOM元素，并且不会重新呈现它们

我不知道这里出现重复的原因是什么，但是

track by$index

防止了重复

您可以对每个

ng repeat

使用

track by$index

，不仅可以防止重复，还可以提高性能。再次提到文件

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

---

希望这能回答您的问题。

不确定这是否是您问题的原因，但您的html确实有一个问题值得我关注。只有一组有限的html元素支持自动关闭标记（

/>

），您无法添加更多。在不受支持的元素（即任何指令）上使用自动关闭标记可能会导致下一个同级元素被完全忽略或呈现不正确。此外。。。我们应该在视频里看到什么？对我来说，没有什么比这更奇怪了……如果你看一下侧边栏面板上的00:12左右，你会注意到它们的副本被添加到下面并迅速删除。在第一个页面加载中，您没有看到任何内容，但我已通过

控制台.log（）

确认发生了相同的错误，这太快了，无法看到。此外，对于自动关闭标记，我更改了它们（请参见编辑），但没有修复任何内容。并不是我真的期望的，这只是一个很好的改变，谢谢。最好在

ng repeat

语句中使用

track by$index

子句。你能在添加后检查一下吗？请检查，因为您也在使用

orderBy

。不确定这是否是您的问题的原因，但您的html确实有一个问题值得我注意。只有一组有限的html元素支持自动关闭标记（

/>

），您无法添加更多。在不受支持的元素（即任何指令）上使用自动关闭标记可能会导致下一个同级元素被完全忽略