如何存储和加载jsplumb的连接（使用AngularJS和jsPlumb）

Question

请任何人帮助我了解如何存储和加载连接，以及锚点 jsplumb 和 anjular js。

请查看以下图片链接 (http://i.stack.imgur.com/YC1PR.jpg)。

第一个是没有连接的图像，第二个是有连接的图像。

当我重新加载页面时，我仍然需要在相同的地方获取连接

Answer 1

只要建立连接，就会触发“connection”(SOURCE) 事件。您需要将连接端点的详细信息存储在该触发函数中，以便以后检索它们。

首先确保您为端点设置了正确的 id。您可以在端点创建时手动设置为：

var e0 = jsPlumb.addEndpoint("div1",{uuid:"div1_ep1"}),  // You can also set uuid based on element it is placed on
 e1 = jsPlumb.addEndpoint("div2",{uuid:"div2_ep1"});

现在绑定 connection 事件，您将在其中存储已建立的连接信息：

var uuid, index=0; // Array to store the endpoint sets.
jsPlumb.bind("connection", function(ci) {
    var eps = ci.connection.endpoints;
    console.log(eps[0].getUuid() +"->"+ eps[1].getUuid()); // store this information in 2d-Array or any other format you wish
    uuid[index][0]=eps[0].getUuid(); // source endpoint id
    uuid[index++][1]=eps[1].getUuid(); // target endpoint id
    }
});

您可以将数组信息转换为 JSON 格式并存储在服务器端。刷新页面时，您需要检索 JSON 数据并恢复连接。要基于 uuid 连接端点，请使用：

jsPlumb.connect({ uuids:["div1_ep1","div2_ep1"] });

这是用于基于端点建立连接的jsFiddle。