首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >angular JS中的vis.js错误

问angular JS中的vis.js错误
EN

Stack Overflow用户
提问于 2016-04-28 21:47:07
回答 1查看 514关注 0票数 0

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

代码语言:javascript
复制
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如下所示

代码语言:javascript
复制
     <!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]。有人能告诉我我的代码中遗漏了什么吗?

我的错误如下

代码语言:javascript
复制
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
EN

回答 1

Stack Overflow用户

发布于 2016-04-28 21:54:44

首先,这与您的问题无关,但这里有几件事需要清理。

  1. 在调用$http.post时不再使用success,取而代之的是then。
  2. 看起来这应该是对$http.get的调用,而不是post。应该从调用$http.get的then方法调用
  3. Draw,而不是在控制器初始化结束时调用。按照目前的编写方式,您不能保证此调用在绘图函数执行之前是完整的,并且数据是可用的。

至于缺少的模块,很可能是路径问题、拼写问题或加载javascript文件的顺序问题。这些代码当然会在您的html中。

您多次加载jquery。你只需要它一次。当你在Jquery中使用angular时,一定要先加载jquery。在这些情况下,Angular将使用它而不是JQLite。我看不到其他任何东西,但有可能在Angular之后加载JQuery,然后再次加载它是在踩到什么东西。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36916641

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档