集成角度和关节js答案

【问题标题】：integrating angular and joint js集成角度和关节js
【发布时间】：2016-02-23 11:22:12
【问题描述】：

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

查看包含：

 <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。但是当我打印纸质对象时，它确实包含具有节点的图形对象。什么可能是这背后的原因。

【问题讨论】：

标签： javascript angularjs jointjs

【解决方案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)

【讨论】：