AngularJS jquery.flot图表指令DOM碰撞

时间:2013-08-25 09:55:33

标签: angularjs charts angularjs-directive flot

我正在使用角度js约4个月,尽管所有的“第一步失败”都没有强调anuglar认为的异步方式,但我面临一个我不太了解的问题。描述并不容易。

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

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

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

还是有其他解释吗?我通过$ routeChangeStart监听并杀死了$ .plot进程,实际上解决了这个问题,但是对于这种行为是否有一些提示,建议和解释?

Plunker flot chart directive DOM collision

我准备了一个类似行为的掠夺者。我已经延迟了指令的创建和指令的异步数据和选项检索方法,以某种方式嘲笑我的应用程序的行为。这是非生产代码,但描述了我的问题发生的简化方式。当您一个接一个地“快速点击”菜单项时,有时可以强制角度在一个页面中显示2个图表。一个指令是连接和做不同部分的东西?我知道我脑子里想念的东西......请给我一个暗示。

我用chrome来重现错误。停止弹药并按“运行”。在按下“运行”后直接点击,你可以快速点击几次。

非常感谢!

0 个答案:

没有答案