我正在尝试使用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发布于 2016-04-28 21:54:44
首先,这与您的问题无关,但这里有几件事需要清理。
至于缺少的模块,很可能是路径问题、拼写问题或加载javascript文件的顺序问题。这些代码当然会在您的html中。
您多次加载jquery。你只需要它一次。当你在Jquery中使用angular时,一定要先加载jquery。在这些情况下,Angular将使用它而不是JQLite。我看不到其他任何东西,但有可能在Angular之后加载JQuery,然后再次加载它是在踩到什么东西。
https://stackoverflow.com/questions/36916641
复制相似问题