Могу ли я вставлять JointJS в модуль AngularJS, как и в любую другую библиотеку?

Question

У меня есть приложение с угловым, и мне нужно использовать эту библиотеку http://www.jointjs.com/, поэтому я загрузил joint.min.js и joint.min.css и разместил их маршруты в index.html, но я не знаю, что положить в app.js, чтобы ввести его, и я продолжаю получать инъекционную ошибку от углового. Возможно ли, что это не способ сделать это? Я много гулял, но не нашел никакого подхода. Буду признателен за любую помощь, спасибо заранее!

Answer 1

Если вы хотите визуализировать диаграмму Jointjs в своем угловом приложении, то это довольно легко сделать. В моем случае я инкапсулировал код Jointjs в угловую директиву и передал в объект графства 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 и подключить их к функциям на вашем объеме в директиве (как показано в код выше).

Чтобы использовать это на ваш взгляд:

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

В моем случае я создаю график в первом случае, с помощью функции Jointjs graph.fromJSON от моего контроллера (строго говоря, это в компоненте обслуживания данных, вызывается из моего контроллера), а затем просто добавьте это в область.

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

Этот подход работает нормально для добавления и удаления элементов и ссылок с диаграммы и для перемещения вещей вокруг. Ваш код контроллера работает только с объектом графика, а все обновления для рендеринга диаграммы обрабатываются компанией 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 для привязки данных. Единственная проблема, которую я обнаружил, заключается в том, что она не очень хорошо работает с угловыми в тех случаях, когда вы хотите редактировать свойства элемента диаграммы (например, содержащий текст) с использованием углового. Например, у меня есть панель свойств (угловой вид), которая используется для редактирования выбранных свойств элемента диаграммы.

Я сделал хакерское обходное решение для этого, что мне слишком стыдно надевать SO; o) Я все еще узнаю о угловом/суставе/позвоночнике, поэтому надеюсь, что к тому моменту, когда закончу свой проект, вы получите лучший подход. Если я это сделаю, я отправлю его здесь. Может быть, кто-то, более опытный, чем я, мог бы уже сделать лучше, хотя - я был бы рад увидеть более удобный подход, размещенный здесь.

В целом, эта директива работает как подход, но она чувствует себя как поверхностная интеграция между Angular и Jointjs. По существу директива создает «остров суставов» внутри углового приложения. Я хотел бы найти более «угловатый родной» способ сделать это, но, возможно, это потребует перезаписи Jointjs для использования угловых, а не опорных ...

P.s. Если у вас уже есть JQuery в вашем приложении, вы можете получить версию сустава, исключающую JQuery из Jointjs загрузки страницы:

http://www.jointjs.com/download

Answer 2

Нашли отличный GitHub repo, который пытается сделать именно то, что ваш спрашивать. Если это не совсем то, что вам нужно, это еще один источник вдохновения!