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

Question

我有一个带有angular的应用程序，我需要使用这个库http://www.jointjs.com/，所以我下载了joint.min.js和joint.min.css并将它们的路由放置在index.html中，但是我不知道要在app.js中放入什么来注入它，而我一直在从角度获取注入错误。这可能不是这样做的方法吗？我搜索了很多，但是没有找到任何方法。我将不胜感激，在此先感谢您！

Answer 1

如果要在角度应用程序中渲染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" />

就我而言，在第一种情况下，graph.fromJSON我使用控制器中的Jointjs
函数创建了图形（严格来说，这是在控制器中调用的数据服务组件中），然后将其添加到范围中。

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配合时效果不佳。例如，我有一个属性窗格（角度视图），用于编辑选定的图元素属性。

我为此提出了一个怪异的解决方法，我对此感到to愧，无法穿上SO；
o）我仍在学习角度/关节/骨干，因此希望在我完成项目时能有更好的方法。如果可以，我会在这里发布。也许比我更专业的人可能已经做得更好了-
我很高兴看到这里发布了更好的方法。

总的来说，该指令是一种方法，但感觉像是Angular和Jointjs之间的表面集成。本质上，该指令在角度应用程序内部创建了“
jointjs岛”。我想找到一种更“ Angular Native”的方法，但是可能需要重写Jointjs以使用angular而不是骨干…

Ps如果您的应用程序中已经有jquery，则可以从Jointjs下载页面中获得一个不包含jquery的joint版本：

http://www.jointjs.com/download