使用 AngularJS 和 jsPlumb（在 AngularJS 控制器中使用 jsPlumb 函数）答案

【问题标题】：Using AngularJS and jsPlumb (use jsPlumb functions in AngularJS controller)使用 AngularJS 和 jsPlumb（在 AngularJS 控制器中使用 jsPlumb 函数）
【发布时间】：2013-07-10 14:37:00
【问题描述】：

所以我有一个正在处理的项目，它要求我使用 jsPlumb 进行图形元素连接，并且我正在完全使用 AngularJS 构建我的应用程序。

如果我想将另一个库的代码包含到我的控制器中（启动一些 jsPlumb 代码，比如在 ng-click 上）或我的 AngularJS 代码的任何其他部分，要遵循什么程序？我应该这样做还是为什么不应该这样做？

【问题讨论】：

标签： angularjs jsplumb angularjs-controller angularjs-ng-click

【解决方案1】：

看看这个评论很好的 jsPlumb/angularJs 集成示例：

https://github.com/mrquincle/jsplumb-example

【讨论】：

不是 angular 1 吗？你知道 Angular 2 的任何其他集成示例吗？谢谢

【解决方案2】：

我没有看到在 Angular 和 jsPlumb 之间建立双向数据绑定的简单方法。

我最终在我的项目中做的是创建一个自定义 Angular 服务，它充当控制器和 jsPlumb 之间的桥梁。此类服务包含特定于应用程序的方法，例如：

从流中移除元素
添加元素
获取元素
获取连接
isElementConnected
等

它允许将所有 jsPlumb 管道代码保留在控制器之外，保持它们干净。

【讨论】：

谢谢@AlexPuckov！顺便说一句，你如何处理元素的动态创建？你怎么知道元素何时被加载？我得到了很多未定义的 parentNode，我试图远离 $timeout...
不确定我是否理解未定义父节点的问题。但是元素的创建不应该很复杂：在控制器中的某个点（单击处理程序或其他东西），您可以在 plumbService 中调用您的自定义函数 addElement ，如上所述。该函数将新的 HTML 元素添加到 jsPlumb 容器并配置端点。如果它没有帮助，我认为最好针对这个特定问题创建一个关于 SO 的新问题。

【解决方案3】：

JSPlumb 已经发布了一个关于如何在 Angular 中使用 JSPlumb 的教程：

https://jsplumbtoolkit.com/docs/toolkit/demo-angular.html

【讨论】：

是的，但这是针对“工具包”版本（在撰写本文时起价约为 2500 美元），而不是免费的“社区”版本