Javascript 不显示中的贴图（angularJs指令，控制器）
我正在尝试为highmaps创建角度指令 下面是我的代码Javascript 不显示中的贴图（angularJs指令，控制器）,javascript,angularjs,controller,directive,highmaps,Javascript,Angularjs,Controller,Directive,Highmaps,我正在尝试为highmaps创建角度指令 下面是我的代码 var myMapDirectives = angular.module('MapDirectives', ['myMapControllers']); // Directive myMapDirectives.directive('myMap', function($http) { console.log("In my-Map directive"); return {
var myMapDirectives = angular.module('MapDirectives', ['myMapControllers']);
// Directive
myMapDirectives.directive('myMap', function($http) {
console.log("In my-Map directive");
return {
restrict: 'EAC',
template: '<div></div>',
replace: true,
controller: 'myMapController',
scope: {
widget: '='
},
link: function(scope, iElement, iAttrs) {
console.log("In my-map link function.", scope, iElement, iAttrs);
var chart;
var process = function(){
var defaultOptions = {
chart: {
renderTo: iElement[0]
},
};
var widget = angular.extend(defaultOptions, scope.widget);
chart = new Highcharts.Map(widget);
};
process();
scope.$watch("widget.series", function(loading){
process();
});
scope.$watch("widget.loading", function(loading){
if(!chart){
return;
}
if(loading){
chart.showLoading();
} else {
chart.hideLoading();
}
});
}
};
});
我按照此链接创建指令，首先我要感谢您。在这里，我修改了您的代码并得到了结果。请检查代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Worldmap with AngularJS</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="angular/angular.js"></script>
<script src="angular/angular-sanitize.js"></script>
<script src="scripts/app.js"></script>
<link rel="stylesheet" href="css/map.css">
</head>
<body ng-app="app">
<div ng-controller="highMapController" class="" style="width:1000px;height:500px;margin:auto;">
<high-map widget="mapConfig" id="container">{{mapConfig}}</high-map>
</div>
</body>
</html>
var app = angular.module('app', ['ngSanitize']);
// Highmap Directive
app.directive('highMap', function($http) {
return {
restrict: 'EAC',
template: '<div></div>',
replace: true,
controller: 'myMapController',
scope: {
widget: '='
},
link: function(scope, element, attr) {
var chart;
var process = function(){
var defaultOptions = {
chart: {
renderTo: element[0]
},
};
var widget = angular.extend(true, {}, defaultOptions, scope.widget);
chart = new Highcharts.Map(widget);
};
process();
scope.$watch("widget", function(loading){
process();
});
}
};
});
//Highmap controller
app.controller('highMapController', ['$scope', '$http',
function ($scope, $http) {
var mapGeoJSON = get data from("http//http://code.highcharts.com/mapdata/custom/world.js")
var data =[]
var mapGeoJSONFeature = mapGeoJSON.features
angular.forEach(mapGeoJSONFeature, function(feature, index) {
data.push({
key: feature.properties['hc-key'],
value: index
});
});
$scope.mapConfig = new Highcharts.Map({
chart: {
renderTo: 'container',
type: 'map',
height: 900,
weight: 800,
backgroundColor: "#eee"
},
title: {
text: "World Map"
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 0,
stops: [
[0, '#EFEFFF'],
[0.5, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]
]
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bottom'
},
series: [{
data: data,
mapData: mapGeoJSON,
joinBy: ['hc-key', 'key'],
name: 'Random data',
states: {
hover: {
color: Highcharts.getOptions().colors[2]
}
},
dataLabels: {
enabled: false
}
}]
});
}]);![My map result page][1]
[1]: http://i.stack.imgur.com/a36tp.png