我有一个带 Angular 应用程序，我需要使用这个库 http://www.jointjs.com/ ，所以我下载了 joint.min.js 和 joint.min.css 并将它们的路由放在 index.html 中，但我不知道在 app.js 中放入什么来注入(inject)它，我不断从 angular 获取注入(inject)错误.这可能不是这样做的方法吗？我用谷歌搜索了很多但没有找到任何方法。我将不胜感激任何帮助，提前致谢!

最佳答案

如果您想在 Angular 应用程序中呈现 Jointjs 图表，那么这很容易做到。在我的例子中，我将 Jointjs 代码封装在一个 Angular Directive(指令)中，并传入了 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 事件处理程序并将它们连接到指令中范围内的函数(如上面的代码所示)。

在您的 View 中使用它:

<joint-diagram graph="vm.graph" width="800" height="600" grid-size="1" />

在我的例子中，我在第一种情况下使用 Controller 中的 Jointjs graph.fromJSON 函数创建了图形(严格来说，这是在从我的 Controller 调用的数据服务组件中)然后将其添加到范围。

function getDiagram() {
    return datacontext.getDiagram($routeParams.diagramId).then(function (data) {
        vm.graph.fromJSON(JSON.parse(diagramJson));
    });
}

此方法适用于在图表中添加和删除元素和链接以及拖动内容。您的 Controller 代码仅适用于图形对象，所有对图表渲染的更新均由 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 进行数据绑定(bind)。我发现的唯一问题是，在您想要使用 angular 编辑图元素属性(例如包含的文本)的情况下，它不能很好地与 angular 一起使用。例如，我有一个属性 Pane ( Angular View )，用于编辑选定的图表元素属性。

我为此做了一个 hacky 解决方法，我太惭愧了，所以不能穿上 ;o) 我仍在学习 angular/joint/backbone，所以希望在我完成我的项目时有更好的方法。如果我这样做，我会把它贴在这里。也许比我更专业的人已经可以做得更好 - 我很高兴看到这里发布了更好的方法。

总的来说，这个指令是一种方法，但感觉像是 Angular 和 Jointjs 之间的表面集成。本质上，该指令在 Angular 应用程序中创建了一个“jointjs 岛”。我想找到一种更“Angular 本地”方式来执行此操作，但也许这需要重写 Jointjs 以使用 Angular 而不是主干...

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

http://www.jointjs.com/download

关于javascript - 我可以像任何其他库一样将 JointJS 作为 AngularJS 模块注入(inject)吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29414286/