我可以像任何其他库一样将 JointJS 作为 AngularJS 模块注入吗?
Can I inject JointJS as an AngularJS module like any other library?
我有一个带有 angular 的应用程序,我需要使用这个库 http://www.jointjs.com/,所以我下载了 joint.min.js 和 joint.min.css 并将它们的路由放在 index.html 但我不知道要在 app.js 中放入什么来注入它,而且我不断收到来自 angular 的注入错误。这可能不是这样做的方法吗?我用谷歌搜索了很多但没有找到任何方法。我将不胜感激任何帮助,提前致谢!
如果您想在 angular 应用程序中呈现 Jointjs 图表,那么这很容易做到。在我的例子中,我将 Jointjs 代码封装在一个 angular 指令中并传入了 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 的配合不是特别好。例如,我有一个属性窗格(一个 angular 视图)用于编辑选定的图表元素属性。
我为此做了一个 hacky 解决方法,我太惭愧了,所以我不敢这样做 ;o) 我仍在学习 angular/joint/backbone 所以希望在我完成我的项目时有更好的方法。如果我这样做,我会 post 放在这里。也许比我更专业的人已经可以做得更好了 - 我很高兴看到更好的方法 posted 在这里。
总的来说,这个指令是一种方法,但感觉像是 Angular 和 Jointjs 之间的表面集成。本质上,该指令在 angular 应用程序中创建了一个 "island of jointjs"。我想找到一种更 "angular native" 的方法来做到这一点,但也许这需要重新编写 Jointjs 才能使用 angular 而不是 backbone...
P.s。如果您的应用程序中已经有 jquery,您可以从 Jointjs 下载页面获取不包含 jquery 的联合版本:
找到了一个很棒的 GitHub repo,它试图按照您的要求去做。如果它不是您想要的,它仍然是一个很好的灵感来源!
我有一个带有 angular 的应用程序,我需要使用这个库 http://www.jointjs.com/,所以我下载了 joint.min.js 和 joint.min.css 并将它们的路由放在 index.html 但我不知道要在 app.js 中放入什么来注入它,而且我不断收到来自 angular 的注入错误。这可能不是这样做的方法吗?我用谷歌搜索了很多但没有找到任何方法。我将不胜感激任何帮助,提前致谢!
如果您想在 angular 应用程序中呈现 Jointjs 图表,那么这很容易做到。在我的例子中,我将 Jointjs 代码封装在一个 angular 指令中并传入了 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 的配合不是特别好。例如,我有一个属性窗格(一个 angular 视图)用于编辑选定的图表元素属性。
我为此做了一个 hacky 解决方法,我太惭愧了,所以我不敢这样做 ;o) 我仍在学习 angular/joint/backbone 所以希望在我完成我的项目时有更好的方法。如果我这样做,我会 post 放在这里。也许比我更专业的人已经可以做得更好了 - 我很高兴看到更好的方法 posted 在这里。
总的来说,这个指令是一种方法,但感觉像是 Angular 和 Jointjs 之间的表面集成。本质上,该指令在 angular 应用程序中创建了一个 "island of jointjs"。我想找到一种更 "angular native" 的方法来做到这一点,但也许这需要重新编写 Jointjs 才能使用 angular 而不是 backbone...
P.s。如果您的应用程序中已经有 jquery,您可以从 Jointjs 下载页面获取不包含 jquery 的联合版本:
找到了一个很棒的 GitHub repo,它试图按照您的要求去做。如果它不是您想要的,它仍然是一个很好的灵感来源!