CODEWITHSUNDEEP
javascriptangularjsmxgraph
Forece85
Forece85

Reputation: 508

MxGraph - Angularjs 1 - Integration

I tried to add mxgraph with angularjs client-side library dynamically. Didnt find any relevant document which states same. Can someone help me out with this integration like what files need to be integrated and what to call from html file to make functional.

app.js var app = angular.module('app', ['mxGraph']);

mxcontroller.js: 

app.controller('Ctrl', ['$scope', 'mxgraph',
 function($scope, mxgraph) {
          $scope.main = function(container)
     {

             var graph = new mxgraph(container);
             var parent = graph.getDefaultParent();
             graph.getModel().beginUpdate();
             try
             {
                 var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                 var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
             }
            finally
             {
                 graph.getModel().endUpdate();
             }
     }; }]);

index.html included mxgraph javascript/src folders

mx.html 

<div ng-controller="Ctrl as controller" id="content-container">

Thanks in Advance

Upvotes: 0

Views: 324

Answers (1)

JoshG
JoshG

Reputation: 6735

Unless you're already using an AngularJS factory, service, or provider for mxGraph, you're going to need to use AngularJS dependency injection to use it in your application.

For example, somewhere before your controller:

let mxGraph = angular.module('mxGraph', []);
mxGraph.factory("mxgraph", function() {
    return window.mxGraph; 
});

You should then be able to inject it into your application like so:

app.controller('yourController', ['$scope', 'mxgraph', function($scope, mxgraph) { ... }]);

Upvotes: 1

Related Questions