Question

我正在使用Angular和D3处理缅因州的互动地图。使用下面的代码，页面加载的唯一响应是

Argument 'MapCtrl' is not a function, got undefined

我不知道发生了什么。

我的index.html只是一系列脚本导入：

<!doctype html>
<html>
    <head>
        <title>Maine Maps</title>

        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="bower_components/angular/angular.min.js"></script>
        <script src="bower_components/angular-route/angular-route.min.js"></script>
        <script src="bower_components/angular-resource/angular-resource.min.js"></script>
        <script src = "bower_components/d3/d3.min.js"></script>

        <script src="js/mapModule.js"></script>
        <script src="js/controller/mapController.js"></script>
        <script src="js/directive/mapDirective.js"></script>
        <script src="js/service/mapService.js"></script>
    </head>

    <body ng-app = "maineMap" ng-controller="MapCtrl">
        <d3-map data="mapData"></d3-map>
    </body>
</html>

app模块是：

angular.module("maineMap", ["ngRoute", "mapControllers", "mapServices", "configuration"]);

angular.module("configuration", [])
    .constant("APPCONFIG", {
        maineData : "data/maine.json",
        countyData : "data/us-counties.json",
        maineCities : "data/maine_cities.csv",
        mapHeight : 500,
        mapWidth : 600,
        defaultTooltip : "<div id = 'county_name' class = 'county_record'>County: <span id = 'county'></span></div>" + 
                    "<div id = 'county_fips' class = 'county_record'>FIPS: <span id = 'fips'></span></div>" +
                    "<div class = 'extra_data'><span class = 'pop_year'>2000</span> Population: <span id = 'county_population'</span></div>" + 
                    "<div class = 'extra_data'><span class = 'pop_year'>2000</span> Density (Sq Mi): <span id = 'county_density'</span></div>" +
                    "<div>Click for 2000 & 2010 Census Data</div>",
    cityTooltip : "<div id = 'city_info' class = city_record'>City: <span id = 'city_name'></span></div>",
    mapScale : 5500,

});

唯一定义的控制器是：

angular.module("mapControllers", [])
    .controller('MapCtrl', ['$scope','Map', function($scope, Map){
        $scope.mapData = Map.mapData();
    }]);

作为依赖项注入maineMap模块。

我有一项使用$resource检索JSON和CSV数据以保存在范围内的服务：

angular.module("mapServices", ["ngResource", "configuration"])
.factory("Map", ["$resource", "APPCONFIG", function($resource, config){
    return {
        mapData : function(){
            console.log(config);
            return $resource(config.maineData, {}, {
                query : {
                    method : "GET",
                    isArray : false,
                    format : "json"

                }
            });
        },
        cityData : function(){
            return $resource(config.maineCities, {}, {
                query : {
                    method : "GET",
                    isArray : false
                }
            });
        }
    };
}]);

第一个函数将在MapCtrl函数中执行。

最后，我有一个指向index.html中列出的d3-map DOM元素。

angular.module("maineMap", ["configuration"])
.directive("d3Map", ["APPCONFIG", function(config){

   var link = function() {
      //draws the map based on the data in $scope.mapData
   }
   return {
        replace : true,
        link : link,
        restrict : "EA"
   };  
}

鉴于此代码库，我不确定为什么MapCtrl被定义为错误的参数。认为这是由于在注入maineMap模块后被实例化，我将控制器修改为

angular.module("maineMap")
.controller('MapCtrl', ['$scope','Map', function($scope, Map){
    $scope.mapData = Map.mapData();
}]);

删除依赖项，仍然发生相同的错误。但是，这是一个非常通用的错误描述，我不知道为什么会抛出它。

角度控制器功能未定义 - 原因？

0 个答案: