javascript - Can I inject JointJS as an AngularJS module like any other library? -

i have app angular , need use library http://www.jointjs.com/, downloaded joint.min.js , joint.min.css , placed routes in index.html don't know put in app.js inject , keep getting injection error angular. possible not way it? googled lot didn't find approach. appreciate help, in advance!

if want render jointjs diagram in angular application, pretty easy do. in case encapsulated jointjs code inside angular directive , passed in jointjs graph object. (simplified) directive looks this:

(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 interact diagram             diagram.on('cell:pointerclick', function (cellview, evt, x, y) {                  //your logic here e.g. select element              });              diagram.on('blank:pointerclick', function (evt, x, y) {                  // logic here e.g. unselect element clicking on blank part of diagram             });              diagram.on('link:options', function (evt, cellview, x, y) {                  // logic here: e.g. select link 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;         }      }]);  })(); 

if need interact model through diagram, use jointjs event handlers , hook them functions on scope in directive (as shown in code above).

to use in view:

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

in case create graph in first case using jointjs graph.fromjson function controller (strictly speaking, in data service component called controller) , add scope.

function getdiagram() {     return datacontext.getdiagram($routeparams.diagramid).then(function (data) {         vm.graph.fromjson(json.parse(diagramjson));     }); } 

this approach works ok adding , removing elements , links diagram , dragging things around. controller code works on graph object , updates diagram rendering handled 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 great library, based on backbone.js databinding. problem have found doesn't play particularly angular in cases want edit diagram element properties (e.g. contained text) using angular. example, have properties pane (an angular view) used edit selected diagram element properties.

i made hacky workaround ashamed put on ;o) i'm still learning angular/joint/backbone hope have better approach time finish project. if do, i'll post here. maybe more expert me better though - i'd glad see better approach posted here.

overall, directive works approach, feels superficial integration between angular , jointjs. directive creates "island of jointjs" inside angular application. find more "angular native" way of doing this, maybe require re-write of jointjs use angular instead of backbone...

p.s. if have jquery in application, can version of joint excludes jquery jointjs download page:

http://www.jointjs.com/download