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

Question

我有一个角度的应用程序,我需要使用这个库http://www.jointjs.com/,所以我下载了joint.min.js和joint.min.css并将他们的路线放在index.html但我不知道在app.js中放入什么来注入它并且我不断从角度获得注入错误.有可能这不是这样做的吗？我google了很多,但没有找到任何方法.我将不胜感激任何帮助,谢谢!

Answer 1

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

在我的情况下,我通过使用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编辑图表元素属性(例如包含的文本)的情况下,它对角度的影响不是特别好.例如,我有一个属性窗格(角度视图),用于编辑选定的图元素属性.

我做了一个hacky解决方法,我太羞于穿上SO; o)我还在学习角度/关节/骨干,所以希望在我完成项目时有更好的方法.如果我这样做,我会在这里发布.也许比我更专业的人可能已经做得更好了 - 我很高兴看到更好的方法发布在这里.

总的来说,这个指令可以作为一种方法,但感觉就像是Angular和Jointjs之间的表面整合.基本上,该指令在角度应用程序内创建了一个"jointjs岛".我想找到一种更"有角度的原生"方式来做到这一点,但也许这需要重新编写Jointjs来使用angular而不是骨干......

Ps如果你的应用程序中已经有jquery,你可以从Jointjs下载页面获得一个不包括jquery的联合版本:

http://www.jointjs.com/download