Question

我正在尝试将角度js与mxgraph一起使用。

这是我的代码

var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];

        $scope.main = function(container)
        {
            alert("hai");
                // Creates the graph inside the given container
                var graph = new mxGraph(container);

                // Gets the default parent for inserting new cells. This
                // is normally the first child of the root (ie. layer 0).
                var parent = graph.getDefaultParent();

                // Adds cells to the model in a single step
                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);
                    var e1 = graph.insertEdge(parent, null, '', v1, v2);
                }
                finally
                {
                    // Updates the display
                    graph.getModel().endUpdate();
                }
            //}
        };

});

但我收到mxGraph is not defined错误。我该如何解决这个问题？或者任何人都可以告诉我如何以正确的方式使用带有angularjs的mxgraph。

Answer 1

mxGraph是一个用于制作形状，顶点和边缘的强大库，可以通过执行以下操作将其转换为模块：

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

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

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

            // Creates the graph inside the given container
            var graph = new mxgraph(container);

            // Gets the default parent for inserting new cells. This
            // is normally the first child of the root (ie. layer 0).
            var parent = graph.getDefaultParent();

            // Adds cells to the model in a single step
            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);
                var e1 = graph.insertEdge(parent, null, '', v1, v2);
            }
            finally
            {
                // Updates the display
                graph.getModel().endUpdate();
            }
        //}
    };
}]);

这允许应用程序以AngularJS依赖项注入方式继续运行，这将使mxGraph无缝工作。

将mxgraph与AngularJs一起使用。错误ReferenceError：未定义mxGraph。怎么解决这个？

1 个答案: