我可以像其他库一样将JointJS作为AngularJS模块注入吗

Can I inject JointJS as an AngularJS module like any other library?

本文关键字：作为 JointJS AngularJS 模块 注入 一样 其他 我可以      更新时间：2023-09-26

我有一个带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中的作用不是特别好。例如，我有一个属性窗格（角度视图），用于编辑选定的图表元素属性。

我为此做了一个巧妙的变通办法，我太羞愧了，不敢穿上SO；o） 我仍在学习角/关节/脊椎，所以希望在完成我的项目时有一个更好的方法。如果我这样做了，我会把它贴在这里。也许比我更专业的人已经可以做得更好了——我很高兴看到这里发布了更好的方法。

总的来说，这个指令是一种方法，但感觉像是Angular和Jointjs之间的表面集成。从本质上讲，该指令在angular应用程序中创建了一个"jointjs岛"。我想找到一种更"棱角分明"的方式来做这件事，但也许这需要重写Jointjs，使用棱角分明的而不是主干。。。

附言：如果你的应用程序中已经有jquery，你可以从Jointjs下载页面中获得一个排除jquery的joint版本：

http://www.jointjs.com/download

发现了一个很棒的GitHub repo，它试图按照你的要求去做。如果它不是你想要的，它仍然是一个伟大的灵感来源！

相关文章：