Angularjs Amchart 地图控件无法正常工作

Question

我已经为 amchart 创建了目录，但是，如果我从模块中删除空的依赖项括号，它就不起作用了。

这是我的代码。

<script src="script.js"></script>
<style>
   .bar{
        height:10px;
        background-color:blue;
        border-bottom:1px solid white;
        color:white;
        font:9px Arial;
        text-align:right;
        padding-right:10px;
    }
</style>

这是测试

</div>
<div data-ng-controller="OtherController">
  <ul data-ng-repeat="name in customer">
    <li>{{name}}</li>
  </ul>
</div>
<script src="https://code.angularjs.org/1.0.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>

如果我像这样保持这一行，这段代码就可以工作，

var app=angular.module('app',[]);

如果我删除括号并保持这样，它不起作用，

var app=angular.module('app');









     app.directive ('helloWorld',function (){
       function link (scope, element, attr){


           scope.testname="nirav";
         var latlong = {};
latlong["AD"] = {
    "latitude": 42.5,
    "longitude": 1.5
};
latlong["AE"] = {
    "latitude": 24,
    "longitude": 54
};
latlong["AF"] = {
    "latitude": 33,
    "longitude": 65
};

var mapData = [{
    "code": "AD",
    "name": "Afghanistan",
    "value": 32358260,
    "color": "#eea638"
}, {
    "code": "AE",
    "name": "Albania",
    "value": 3215988,
    "color": "#d8854f"
}, {
    "code": "AF",
    "name": "Algeria",
    "value": 35980193,
    "color": "#de4c4f"
}];

       var map;
var min = Infinity;
var max = -Infinity;


// get min and max values
for (var i = 0; i < mapData.length; i++) {

    var value = mapData[i].value;
    if (value < min) {
        min = value;
    }
    if (value > max) {
        max = value;
    }
}





       AmCharts.ready(function() {
    AmCharts.theme = AmCharts.themes.dark;
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.amcharts.com/lib/3/images/";

    map.addTitle("Population of the World in 2011", 14);
    map.addTitle("source: Gapminder", 11);
    map.areasSettings = {
        unlistedAreasColor: "#000000",
        unlistedAreasAlpha: 0.1
    };
    map.imagesSettings.balloonText = "<span style='font-size:14px;'><b>[[title]]</b>: [[value]]</span>";

    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        images: []
    }

    var minBulletSize = 6;
    var maxBulletSize = 70;    
    // it's better to use circle square to show difference between values, not a radius
    var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI;
    var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;

    // create circle for each country
    for (var i = 0; i < mapData.length; i++) {
        var dataItem = mapData[i];
        var value = dataItem.value;
        // calculate size of a bubble
        var square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare;
        if (square < minSquare) {
            square = minSquare;
        }
        var size = Math.sqrt(square / (Math.PI * 2));
        var id = dataItem.code;

        dataProvider.images.push({
            type: "circle",
            width: size,
            height: size,
            color: dataItem.color,
            longitude: latlong[id].longitude,
            latitude: latlong[id].latitude,
            title: dataItem.name,
            value: value
        });
    }





    map.dataProvider = dataProvider;

    map.write("chartdiv");
});


       }
       return {
         template:' <div id="chartdiv">{{testname}}</div>   ',
         link:link,
         restrict:'E'
       }

     });



    </script>
  </body>

</html>

Answer 1

[]是实例化一个模块，没有它是取回你的模块。方括号内是您的依赖项所在的位置。如果你没有依赖关系，就把它留成一个空数组，一切都应该没问题。

注意：在整个代码中，angular.module('name', []) 应该只有一个实例。实例化后，您将在没有方括号的情况下检索它。

Answer 2

            angular.module('thirdParty1', []).factory('hello', function () {
              return 'hello world';
            });
            angular.module('thirdParty2', []).factory('hello', function () {
              return 'hi there';
            });

            // "own" modules
            angular.module('own1', ['thirdParty1']).controller('Own1Ctrl', function(hello) {
              this.greet = hello;
            });
            angular.module('own2', ['thirdParty2']).controller('Own2Ctrl', function(hello) {
              this.greet = hello;
            });

            angular.module('app', ['own1', 'own2']);



            <body ng-app="app">
              <div ng-controller="Own1Ctrl as own1">
                OwnCtrl1: {{ own1.greet }}
              </div>
              <div ng-controller="Own2Ctrl as own2">
                OwnCtrl2: {{ own2.greet }}
              </div>
            </body>

来源： http://michalostruszka.pl/blog/2015/05/21/angular-dependencies-naming-clash/

Angularjs Amchart 地图控件无法正常工作

Angularjs Amchart map control is not working

javascript

angularjs

angularjs-directive

module

amcharts