Question

我正在尝试使用vis.js库来显示一个简单的网络。我的控制器如下

var App = angular.module('App', ['ngRoute','ngVis']);


    App.controller('visController', ['$scope','$http','$window','VisDataSet',function($scope,$http,$window,VisDataSet)
    {
        $scope.Nodes = [];
        $scope.Edges = [];
        $http.post('/getNetworkData').success(function(response) 
        {
            $scope.Nodes = response.Nodes;
            $scope.Edges = response.Edges;
            console.log($scope.Edges);
            console.log($scope.Nodes);
        });

        var network = null;

        var destroy = function(){
            if(network!=null)
            {
                network.destroy();
                network = null;
            }    
        }

        var draw = function()
        {
            destroy();
            var nodes = new vis.Dataset($scope.Nodes);
            var edges = new vis.Dataset($scope.Edges);
            var container = angular.element( document.querySelector('#mynetwork'));
            console.log(container);
            var data = {
                nodes : nodes,
                edges : edges
            };

            var options = {
                interaction: {
                  navigationButtons: true,
                  keyboard: true
                }
            };
            network = new vis.Network(container,data,options);
            network.on('select', function(params) {
                console.log("clicked");
            });
        }
        draw();

    }]);

和我的html div如下

     <!DOCTYPE html>
<html ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title>Visualization Page</title>
        <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/bootstrap/normalize.css">
        <link rel="stylesheet" href="css/bootstrap/style.css">
        <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
        <link href="css/visualizationPage/style_vispage.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular-route.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="css/bootstrap/jquery.min.js"></script>
        <script src="css/bootstrap/bootstrap.min.js"></script>
        <script src="js/ng-file-upload-shim.min.js"></script> 
        <script src="js/ng-file-upload.min.js"></script>
        <script src="controllers/controller.js"></script>
        <script src="js/ngDialog.js"></script>
        <link rel="stylesheet" type="text/css" href="css/createNetwork/ngDialog.css">
        <link rel="stylesheet" type="text/css" href="css/createNetwork/ngDialog-theme-default.css">
        <script src="js/vis.js"></script>
        <script src="js/exampleUtil.js"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap/vis.css">
        <script src="js/googleAnalytics.js"></script>
    </head>    
    <body ng-controller="visController">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-3 col-md-2 sidebar">
                    <ul class="nav nav-sidebar">
                        <li class="active"><a href="/visualization">Visualization<span class="sr-only">(current)</span></a></li>
                        <li><a href="/data">Data</a></li>
                    </ul>
                </div>
                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                    <h2 class="page-header">Visualization</h2>
                    <div id="mynetwork">

                    </div>  
                </div>
            </div>
        </div>
    </body>
</html>

我尝试加载页面时收到错误Uncaught Error: [$injector:modulerr]。有人能告诉我我的代码中缺少什么。

我的错误如下

Error: [$injector:modulerr] http://errors.angularjs.org/1.5.2/$injector/modulerr?p0=n...)
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:6:416
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:40:60
    at p (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:135)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:304
    at p (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:135)
    at db (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:43:164)
    at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:20:463

Answer 1

首先，这与您的问题无关，但有几件事情应该在这里清理。

在您对$ http.post的调用中消除成功使用并将其替换为。成功被剥夺了。
看起来这应该是对$ http.get的调用，而不是post。
应该从调用$ http.get的then方法调用Draw，而不是在控制器初始化结束时调用。目前编写的方式不能保证此调用完成，并且在绘制函数执行之前数据可用。

对于丢失的模块，它很可能是路径问题，拼写问题或您正在加载javascript文件的顺序问题。那段代码当然会在你的HTML中。

你不止一次加载jquery。你只需要一次。当你使用角度与Jquery总是首先加载jquery。在这种情况下，Angular将使用它而不是JQLite。我没有看到任何其他内容，但是可能在Angular之后加载JQuery然后再次加载它是踩到某些东西。

角JS中的vis.js错误

1 个答案: