多次调用 Cytoscape 事件 cxttap

Question

我正在尝试使用 Cytoscape 和 AngularJS 1.6 创建网络工作流创建两个节点后，用户可以在它们之间创建边。为此，我使用 cy.on('cxttap') cytoscape 函数来检测两个节点上的右键单击，然后插入一条新边。这很好用。直到我添加了一个新视图，用户可以在其中查看数据库中保存的工作流。问题是，如果我打开“查看”选项卡然后返回创建选项卡，cy.on('cxttap') 函数会被调用两次，并且在细胞景观 canvas 上插入了两条边，但在我的范围变量。我曾经为两个视图使用相同的工厂，但现在我为每个视图使用不同的 angular 工厂。

如果我多次打开这些选项卡之间的切换，我打开查看选项卡的次数就是函数被调用的次数，因此行数更多。

这里 (https://jsfiddle.net/y47kwpg7/4/) 是我的视图及其控制器的代码片段。 "Creation View" --> "MlalTextWorkflowGeneratorCtrl" 和 "Viewing View" --> "MlalTextWorkflowViewerCtrl".

（请见谅，我不知道如何让它在单个文件中工作）

我这里的工厂是 cytoscape canvas，另一个视图有一个类似的工厂，但 ID 选择不同。

感谢您的帮助！

Answer 1

您要么需要

(1) 如果您正在重新使用一个实例，请移除旧的监听器，或者

(2) 每次创建新视图时创建一个新实例。

Answer 2

@maxkfranz 的回答指导我做了更多的调试，最后我发现了问题。

问题是我有一些从我的控制器调用的侦听器函数，以便检测 cytoscape 节点上的事件。触发的侦听器存储在变量 workflowGraph.listeners 中。你可以看到旧代码[]1。问题是这个变量在我的控制器重新加载时没有被清空，因为我从我的控制器调用监听器，它们被再次添加到这个变量。所以，一个监听器有多个函数可以调用。

我用来解决这个问题的方法是创建一个新的 "listener" 类型的函数，我之前为 cytoscape 事件创建了一个函数，每次加载我的控制器时我都会调用它，以清空我的 cytoscape 工厂的监听器变量.

在cytoscape工厂

    workflowGraph.reinitialize = function () {
        workflowGraph.listeners = {};
    };

在控制器中

workflowCreation为厂名

  workflowCreation.reinitialize();

这只会清空工厂中的侦听器变量。

记得在 cytoscape 初始化之后和调用任何其他侦听器函数之前在控制器中调用它

希望这对某人有所帮助。

多次调用 Cytoscape 事件 cxttap

Cytoscape event cxttap called multiple times

javascript

angularjs

cytoscape-web

cytoscape.js