Интеграция угловых и совместных js

Question

Я пытаюсь интегрировать угловые с совместным js.I обернул соединение 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; 
    } 

}]); 

граф, ширина и высота передаются через controller.Directive только рендеринг бумажного объекта без каких-либо узлов (клетки) с помощью прошло graph object. Но когда я печатаю бумажный объект, он содержит объект графа с узлами. что может быть причиной этого.

Answer 1

Я не на 100% уверен в основной причине этого, но поскольку вы добавляете элементы на график до, вы создаете экземпляр Paper, они не нарисованы. Вы можете использовать graph.resetCells(), чтобы вызвать перерисовку. Например, используя пример Hello World, представленный в JointJS;

// 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)