javascript - 整合angular和joint js

Question

我正在尝试将 angular 与联合 js 集成。我已将联合 js 内容包装在 angular 指令中，但由于某些原因，代码无法正常工作。

View 包含:

 <joint-diagram graph="graph" width="width" height="height" grid-size="1" />

指令:

 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]);


    }

    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;
    }

}]);

图形、宽度和高度通过 Controller 传递。指令仅渲染纸对象，没有任何节点(单元格)c 通过图形对象传递。但是当我打印纸对象时，它确实包含具有节点的图形对象。什么可能是这背后的原因。

Answer 1

我不能 100% 确定造成这种情况的根本原因，但由于您在创建 Paper 实例之前向图形中添加了项目，因此不会绘制它们。您可以使用 graph.resetCells() 来触发重绘。例如，使用JointJS中提供的Hello World示例；

// Create an empty Graph instance and assign to the Paper instance
var graph = new joint.dia.Graph,
    paper = new joint.dia.Paper({
        el: element[0],
        width: scope.width,
        height: scope.height,
        model: graph,
        gridSize: scope.gridSize
    }),
    cells = [];

var rect = new joint.shapes.basic.Rect({
    position: { x: 100, y: 30 },
    size: { width: 100, height: 30 },
    attrs: { rect: { fill: 'blue' }, text: { text: 'A Box', fill: 'white' } }
});

var rect2 = rect.clone();
rect2.translate(300);

var link = new joint.dia.Link({
    source: { id: rect.id },
    target: { id: rect2.id }
});

cells.push(rect, rect2, link);

// Now refresh the graph to ensure the nodes render
graph.resetCells(cells)