我可以注入JointJS像任何其他库的AngularJS模块？ [英] Can I inject JointJS as an AngularJS module like any other library?
问题描述
I have an app with angular and I need to use this library http://www.jointjs.com/, So I downloaded the joint.min.js and joint.min.css and placed their routes in the index.html but I don't know what to put in the app.js to inject it and I keep getting injection error from angular. Is it possible that this is not the way to do it? I googled a lot but didn't find any approach. I will appreciate any help, thanks in advance!
推荐答案
如果你想呈现一个Jointjs图中的角应用程序，那么就是pretty容易做到的。在我来说，我所封装的Jointjs code角指令内部和Jointjs图形对象通过。 （简化）指令如下：
If you want to render a Jointjs diagram in your angular application, then that is pretty easy to do. In my case I encapsulated the Jointjs code inside an angular directive and passed in the Jointjs graph object. The (simplified) directive looks like this:
(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事件处理程序，并在指令勾起来在您的示波器功能（如上面的code）。
If you need to interact with your model through the diagram, use the Jointjs event handlers and hook them up to functions on your scope in the directive (as shown in the code above).
要在您的视图使用：
<joint-diagram graph="vm.graph" width="800" height="600" grid-size="1" />
在我来说，我使用Jointjs从我的控制器 graph.fromJSON 函数来创建在第一种情况下的图（严格来说，这是一个数据服务组件从我的控制器调用），然后只需添加这范围之内。
In my case I create the graph in the first case by using the Jointjs graph.fromJSON function from my controller (strictly speaking, this is in a data service component that is called from my controller) and then just add this to the scope.
function getDiagram() {
return datacontext.getDiagram($routeParams.diagramId).then(function (data) {
vm.graph.fromJSON(JSON.parse(diagramJson));
});
}
本方法适用于添加和删除图元素和链接，并为拖动周围事物确定。您的控制器code只是工程的图形对象上，所有的更新图表呈现由Jointjs处理。
This approach works OK for adding and removing elements and links from the diagram and for dragging things around. Your controller code just works on the graph object and all the updates to the diagram rendering are handled by 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的数据绑定。我发现的唯一的问题是，它并没有你想要使用的角度来编辑图元素的属性（例如包含的文本）与角度的情况下发挥特别好。例如，我有一个属性面板，用于编辑选定图元素的属性（角视图）。
Jointjs is a great library, but it is based on Backbone.js for databinding. The only problem I have found is that it doesn't play particularly well with angular in cases where you want to edit diagram element properties (e.g. the contained text) using angular. For example, I have a properties pane (an angular view) that is used to edit the selected diagram element properties.
我做这个，我不好意思SO放在一个哈克的解决方法; O）我还在学习角/合资/骨干所以希望有由我完成我的项目时更好的方法。如果我这样做，我会在这里发布。也许有人更专业的比我已经可以做的更好，但 - 我会很高兴地看到一个更好的方法贴在这里。
I made a hacky workaround for this that I am too ashamed to put on SO ;o) I'm still learning about angular/joint/backbone so hope to have a better approach by the time I finish my project. If I do, I'll post it here. Maybe someone more expert than me could already do better though - I'd be glad to see a better approach posted here.
总体而言，该指令的作品作为一种方法，但它的感觉就像角和Jointjs之间的肤浅的整合。从本质上讲指令创建jointjs岛的角度应用程序中。我想找到更多的角本土这样做的方式，但也许这将需要Jointjs的重新写入使用角度，而不是骨干...
Overall, this directive works as an approach, but it feels like a superficial integration between Angular and Jointjs. Essentially the directive creates an "island of jointjs" inside the angular application. I would like to find a more "angular native" way of doing this, but maybe that would require a re-write of Jointjs to use angular instead of backbone...
P.S。如果你已经有jQuery的在你的应用程序，你可以得到一个版本关节从Jointjs下载页面不包括jQuery的：
P.s. If you already have jquery in your application, you can get a version of joint that excludes jquery from the Jointjs download page:
http://www.jointjs.com/download
这篇关于我可以注入JointJS像任何其他库的AngularJS模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
