在AngularJS中使用mxGraph出现ReferenceError: mxGraph未定义的解决方法

这个错误的核心原因很明确：mxGraph的核心库没有被正确加载到你的页面中，导致AngularJS的控制器找不到mxGraph这个全局构造函数。下面是一步步的解决方案：

1. 确保正确引入mxGraph的资源文件 #

首先你需要获取mxGraph的库文件（从官方包中下载即可），然后在HTML页面中引入核心的mxClient.js文件——这个文件会暴露mxGraph等必要的全局对象。如果需要默认样式来保证图形显示正常，也可以引入对应的CSS文件。

示例引入代码（注意路径要和你的文件实际位置匹配）：

<!-- 先引入mxGraph核心JS -->
<script src="mxgraph/javascript/mxClient.js"></script>
<!-- 可选：引入mxGraph默认样式 -->
<link rel="stylesheet" href="mxgraph/styles/mxGraph.css">

2. 严格控制脚本引入顺序 #

脚本的加载顺序非常关键，必须保证mxGraph的脚本在AngularJS和你的业务代码之前加载。正确的顺序应该是：

• mxClient.js
• angular.js
• 你的AngularJS应用/控制器代码

如果顺序反了，当你的控制器代码执行时，mxGraph还没被定义，就会抛出你遇到的错误。

3. 验证mxGraph是否成功加载 #

在浏览器的开发者控制台中直接输入mxGraph并回车，如果能看到类似function mxGraph(container) {...}的输出，说明库已经加载成功；如果返回undefined，那你需要检查文件路径是否正确，或者文件是否损坏。

4. 完善你的AngularJS代码细节 #

除了库加载问题，还要确保你的main函数在DOM元素就绪后再调用，避免找不到容器元素：

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $timeout) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    
    $scope.main = function(container) {
        // 先做个校验，避免重复错误
        if (typeof mxGraph === 'undefined') {
            console.error("mxGraph库未正确加载");
            return;
        }
        
        var graph = new mxGraph(container);
        var parent = graph.getDefaultParent();
        
        // 开启事务添加节点和连线（mxGraph的标准操作方式）
        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);
            graph.insertEdge(parent, null, "", v1, v2);
        } finally {
            // 结束事务，渲染图形
            graph.getModel().endUpdate();
        }
    };
    
    // 使用$timeout等待DOM渲染完成后调用main函数
    $timeout(function() {
        var container = document.getElementById("graphContainer");
        $scope.main(container);
    });
});

对应的HTML容器：

<div ng-app="myApp" ng-controller="myCtrl">
    <div id="graphContainer" style="width: 400px; height: 300px; border: 1px solid #ccc;"></div>
</div>

按照上面的步骤调整后，应该就能解决mxGraph is not defined的错误，成功在AngularJS中渲染mxGraph图形了。

内容的提问来源于stack exchange，提问作者user1187