整合角度和关节js

Question

我正在尝试将角度与关节js进行整合。我已将关节js内容包装在角度指令中但由于某些原因，代码无效。

视图包含：

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

}]);

图形，宽度和高度通过控制器传递。指示只渲染纸质对象而没有任何节点（单元格）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)