2015-07-10 64 views
0

我爲amchart創建了目錄,但是,如果我從模塊中刪除空的依賴關係支架,它不起作用。Angularjs 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> 
+0

變種應用= angular.module( '應用',[]);是正確的語法 – Jax

+0

如果在調用angular.module()時不包含依賴關係數組,它將嘗試查找現有模塊而不是創建新模塊。 https://docs.angularjs.org/api/ng/function/angular.module – rob

回答

-1
  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/

1

[]是實例化一個模塊,如果沒有它將檢索你的模塊。方括號內是你的依賴關係去的地方。如果你沒有依賴關係,只需把它作爲一個空數組,一切都應該沒問題。

注意:整個代碼中只應該有一個angular.module實例('name',[])。實例化後,您將在沒有方括號的情況下檢索它。