AngularJS jquery.flot图表指令DOM冲突

我现在与angular js合作了大约4个月，尽管有很多“第一步失败”，比如没有强调anuglar思考的异步方式，但我面临着一个我并不真正理解的问题。这不是那么容易描述的

我有一个提供者，它在routeprovider的resolve函数中注册指令-在配置阶段。为了以编程方式编译预配置指令，我在每个路由的特定控制器调用上创建它们。实际上，我在这里处理的指令是一个复杂的flotchart指令。它从RESTAPI检索数据，转换检索到的数据，并准备不同类型的选项设置，如适当的堆叠折线图或简单折线图。每一步都需要时间，所以我介绍了一些承诺，在我最终称之为“$.plot”之前，确保每件事都在正确的位置

现在我有以下情况：想象一个有两个标签的单页应用程序。每个选项卡就像一个第一类菜单项一样，都指向一个新页面，其中包含要处理的新控制器和要呈现的新部分。对于每个页面，除了其他指令之外，我还有一个重flotchart指令要呈现。实际上，绘制图表大约需要5秒钟。所以我们假设我们真的从一开始就启动了应用程序——就像按F5键一样。现在我第一次进入第一页，在提到的5秒钟内，我切换选项卡进入下一页。我进入下一页，看到了不同的部分、布局和内容以及加载图表——但实际上，第一页的指令仍然绑定到该沉重的flotchart指令的链接阶段（仍在为flot准备选项并计算以图形方式输出的数据）

我的问题是，这个链接阶段实际上在一个完全不同的模板/路由/控制器上下文中结束，并且被卡住了。它因jquery.flot中的控制台“replace”错误而崩溃。我认为这个错误意味着flot试图绘制成一个不再存在的div。但这个错误发生在我在第一页的重载flot指令的链接阶段切换选项卡时。当第一页的图表完全呈现时不会发生这种情况，当第一页的指令没有进入链接阶段时也不会发生这种情况（或者我缺少了什么？？）。在点击jquery“$.plot”之前，我尝试直接放置一些console.logs，只记住第一页的chart指令，以便深入了解实际发生的情况。奇怪的是，当我在这神奇的5秒内切换选项卡时，我仍然从第一个页面条目中获取控制台日志条目，尽管我在另一个页面上。现在猜猜看。这很奇怪——实际上，两个指令链接阶段并排运行，其中一个在完全不同的视图上（或者它不是完全不同，因为它是一个单页应用程序？）。想象一下，我在完全相同的div-id-like$（“#flot-chart”）中绘制（“呈现”）图表。因此，我在第一页和第二页都有包含id=“flot chart”的html部分。当我现在从第一页切换到第二页时（没有完成第一张图表）我从第二页的#flot chart div中呈现的第一页中获取图表，半秒钟后在同一div中呈现的实际正确的图表。因此，实际上第一页的chart指令的链接阶段以完全不同的页面结束，以连续显示两个图表的方式。我知道jquery.flot依赖于通过jquery进行的DOM操作，这可能就是问题所在（也许这是我问题的唯一真正解释），因为jquery DOM操作是从生活的角度出发的

还是有其他解释？我通过$routeChangeStart监听并终止$.plot进程，成功地解决了这个问题，但是对于这种行为是否有一些提示、建议和解释

我准备了一个有类似行为的扑克牌。我延迟了指令的创建以及指令的异步数据和选项检索方法，以模拟我的应用程序的行为。这是非生产代码，但描述了问题发生的简化方式。当您多次“快速点击”菜单项时，有时可以强制angular在一页中显示两个图表。实际上，一个指令是用不同的部分链接和做事情？我知道我在想什么。。。请给我一个提示

我用chrome复制错误。停止插入器并按“运行”。直接按下“运行”键后，尽可能快地单击两个链接几次

---

非常感谢

就你的链接而言：'404找不到：*.plnkr.co'很抱歉。我会试着记得稍后再查。我想整个网站都坏了。嗯。。。还是很难弄清楚。由于经常与同事们交谈和讨论，我认为这与jquery调用有关，因为这实际上是“ng宇宙”之外的唯一部分。。。但我不应该得到一个例外吗？难道安格尔不应该避免那样的误导吗。。。喜欢被迫在错误的视图中呈现指令吗？嗯……延迟是在正确的位置，还是你设计的延迟具有相同的净结果？我问的原因是我的第一个想法包括使用承诺将同步部分封装在承诺中，这样就不会有延迟。我可能能够让它工作-但我不想让它工作，然后你的实际代码就没有一对一的对应关系。代码示例中的延迟/延迟只是为了模拟真实的生产代码行为-产品代码中没有一个超时。我总是用承诺来获得所有需要的数据。当我不使用承诺时，flot的最终数据集还没有准备好，因为所有的异步调用。大量使用承诺也导致了同样的情况。问题是将指令加载到其temp中