Question

我正在创建一个仪表板，我想添加这张美国地图，当我点击任何一个区域时，我希望它的人口从cities.json文件打印在网页上。

导入json文件的服务。

App.factory('citiesData', ['$http', function($http) {

    return {

        getMessageData : function () {

            return $http({ method: 'GET', url: '../app/_data/usa-cities.json'})

            .then(function(response) {

                return response.data;

            }, function(errorResponse) {

                throw errorResponse.status;

            });

        }

    }

}]);

我为jvectormap插件创建了一个指令，一切正常。

这是我的指令代码。

App.directive('mapUsa', [function() {

    return {

        restrict: 'A',
        link: function(scope, element, attrs) {

            element.vectorMap({
                map: 'us_aea_en',
                backgroundColor: 'transparent',
                zoomButtons: false,
                regionStyle: {
                    initial: {
                        fill: '#343434' 
                    },
                    hover: {
                        fill: '#242424'
                    }
                },
                onRegionClick: function(event, code) {

                },
                markerStyle: {
                    initial: {
                        fill: '#F0A518',
                        stroke: '#F0A518',
                    }
                },
                markers: [
                    {latLng: [37.78, -122.41], name: 'San Francisco', style: {r: 10}},
                    {latLng: [40.71, -74], name: 'New York City', style: {r: 15}},
                    {latLng: [41.89, -87.62], name: 'Chicago', style: {r: 5}},
                    {latLng: [34.00, -118.25], name: 'Los Angeles', style: {r: 20}},
                    {latLng: [34.00, -106.00], name: 'New Mexico', style: {r: 10}},
                    {latLng: [44.50, -100.00], name: 'South Dakota', style: {r: 13}},
                    {latLng: [25.78, -80.22], name: 'Miami', style: {r: 7}},
                ]
            });

        }

    }

}])

示例JSON：

{ "US-AL": { "name": "Alabama", "population": 4833722 }, "US-AK": { "name": "Alaska", "population": 735132 }

HTML：

<div class="col-md-8">
    <div class="map-container padding-all-15">
        <div class="map-usa margin-bottom-15" map-usa></div>
    </div>
</div>
<div class="col-md-4">
    <div class="header-container">
        <h4>Population</h4>
        <span></span>
    </div>
</div>

code中的onRegionClick参数会返回代码，我为cities.json文件中的每个代码创建了一个对象。

我想知道如何在指令内的控制器中访问该服务。
如何访问onRegionClick以获取代码并检索所点击区域的相应数据。

使用jquery插件并尝试使用angular的数据绑定是正确的方法，还是有其他方法需要遵循此方案？

提前致谢。

Answer 1

这只是一个想法，也许它正在发挥作用。

App.directive('mapUsa', [function() {

return {

    restrict: 'A',
    link: function(scope, element, attrs) {
      element.vectorMap({
      ...
         onRegionClick: function(event, code) {
              scope.onRegionClick(event, code);
         }
      }
    },
    controller: ['citiesData', function(citiesData){
         onRegionClick: function(event, code) {
              console.log(citiesData);
         }
    }]

Answer 2

你可能会做这样的事情

    var mdata;
    app.controller('MapCtrl',['$scope','$location','$http', function($scope, $location,$http) {

            $http.get('ajax/data.json').success(function(data, status, headers, config){
                mdata = data;
              //   $scope.mapdata = data;
            }).error(function(data, status, headers, config) {

                alert("Error retrieving data");
            })

    }]);

    app.directive("mapUsa", [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch("mdata", function (n, o) {
                $(element).vectorMap({
                    map: 'world_mill_en',
                    backgroundColor: "transparent",
                    regionStyle: {
                        initial: {
                            fill: '#e4e4e4',
                            "fill-opacity": 1,
                            stroke: 'none',
                            "stroke-width": 0,
                            "stroke-opacity": 1
                        }
                    },
                    series: {
                        regions: [{
                            values: mdata,
                            scale: ["#92c1dc", "#ebf4f9"],
                            normalizeFunction: 'polynomial'
                        }]
                    },
                    onRegionLabelShow: function (e, el, code) {

                        if (typeof mdata[code] != "undefined")
                            el.html(el.html() + ': ' + mdata[code] + ' new visitors');
                    },
                    onRegionClick: function (event, code) {

                    },
                    markerStyle: {
                        initial: {
                            fill: '#F0A518',
                            stroke: '#F0A518'
                        }
                    }
                });
            });

        }

    }

}]);

Angular JS - 访问“onRegionClick”的jvector地图

2 个答案: