如果您想在 Angular 应用程序中渲染 Jointjs 图表，那么这很容易做到。就我而言，我将 Jointjs 代码封装在一个角度指令内，并传入 Jointjs 图形对象。 （简化的）指令如下所示：
(function () {
'use strict';
var app = angular.module('app');
app.directive('jointDiagram', [function () {
var directive = {
link: link,
restrict: 'E',
scope: {
height: '=',
width: '=',
gridSize: '=',
graph: '=',
}
};
return directive;
function link(scope, element, attrs) {
var diagram = newDiagram(scope.height, scope.width, scope.gridSize, scope.graph, element[0];
//add event handlers to interact with the diagram
diagram.on('cell:pointerclick', function (cellView, evt, x, y) {
//your logic here e.g. select the element
});
diagram.on('blank:pointerclick', function (evt, x, y) {
// your logic here e.g. unselect the element by clicking on a blank part of the diagram
});
diagram.on('link:options', function (evt, cellView, x, y) {
// your logic here: e.g. select a link by its options tool
});
}
function newDiagram(height, width, gridSize, graph, targetElement) {
var paper = new joint.dia.Paper({
el: targetElement,
width: width,
height: height,
gridSize: gridSize,
model: graph,
});
return paper;
}
}]);
})();
如果您需要通过图表与模型进行交互，请使用 Jointjs 事件处理程序并将它们连接到指令中范围内的函数（如上面的代码所示）。
要在您的视图中使用它：
<joint-diagram graph="vm.graph" width="800" height="600" grid-size="1" />
在我的例子中，我使用 Jointjs 在第一种情况下创建图表graph.fromJSON我的控制器中的函数（严格来说，这是在从我的控制器调用的数据服务组件中），然后将其添加到范围中。
function getDiagram() {
return datacontext.getDiagram($routeParams.diagramId).then(function (data) {
vm.graph.fromJSON(JSON.parse(diagramJson));
});
}
这种方法适用于在图表中添加和删除元素和链接以及拖动内容。您的控制器代码仅适用于图形对象，并且图表渲染的所有更新均由 Jointjs 处理。
function addCircle(x, y, label) {
var cell = new joint.shapes.basic.Circle({
position: { x: x, y: y },
size: { width: 100, height: 100 },
attrs: { text: { text: label } }
});
graph.addCell(cell);
return cell;
};
Jointjs 是一个很棒的库，但它基于 Backbone.js 进行数据绑定。我发现的唯一问题是，当您想要使用 Angular 编辑图表元素属性（例如包含的文本）时，它与 Angular 的配合效果不佳。例如，我有一个属性窗格（角度视图），用于编辑选定的图表元素属性。
我为此做了一个奇怪的解决方法，我太羞于这样做；o）我仍在学习角度/关节/骨干，所以希望在我完成项目时有更好的方法。如果我这样做，我会将其发布在这里。也许比我更专家的人已经可以做得更好 - 我很高兴看到这里发布了更好的方法。
总的来说，这个指令作为一种方法起作用，但感觉像是 Angular 和 Jointjs 之间的表面集成。本质上，该指令在角度应用程序内创建了一个“jointjs 岛”。我想找到一种更“角度原生”的方式来做到这一点，但也许这需要重写 Jointjs 以使用角度而不是骨干......
附注如果您的应用程序中已经有 jquery，则可以从 Jointjs 下载页面获取不包含 jquery 的 Joint 版本：
http://www.jointjs.com/download
