AngularJS中的Leaflet地图交互

Question

我是AngularJS的新手,我有一个通过指令加载的Leaflet应用程序.从http://leafletjs.com/examples/choropleth.html可以无瑕地获取传单配置,它会加载带有突出显示的zipcodes的地图.

我的问题是我想从一个返回Plotly url的ajax调用中加载一个url.如何使用在Angular中嵌入的iframe替换地图.

注意代码非常粗糙,主要是带有指令的纯javascript:

控制器:

app.controller('MapController', ['$scope', '$http', function($scope, $http) {
    $scope.data = '';
    $scope.getData = function(URL) {
        $http.get(URL).success(function(data) {
            $scope.data = data;
        })
        return $scope.data;
    }
}]);

指示:

app.directive('map', function() {
    var linker = function (scope, element, attrs) {
        var geojson;
        var info;


        var zip_data = $.getJSON("data/live", function(data){on_json_received(data)})


        function on_json_received(data){
            L.mapbox.accessToken = 'token';
            var map = L.mapbox.map('map', 'xxx.xx')
            .setView([37.760, -122.435], 13);
            info = L.control();


            info.onAdd = function (map) {
                this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
                this.update();
                return this._div;
            };

            // method that we will use to update the control based on feature properties passed
            info.update = function (e) {
                if(e)
                    this._div.innerHTML = '<h4>'+e.target.feature.id+', Sentiment</h4>' +  e.target.feature.sentiment
                else
                    this._div.innerHTML = '<h4>Zipcode, Sentiment</h4>' 
            };

            info.addTo(map);

            var legend = L.control({position: 'bottomright'});

            legend.onAdd = function (map) {

                var div = L.DomUtil.create('div', 'info legend'),
                    grades = [-1,-.7, -.5, -.3, 0, .3, .5, .7,1],
                    labels = [];

                // loop through our density intervals and generate a label with a colored square for each interval
                for (var i = 0; i < grades.length; i++) {
                    div.innerHTML +=
                        '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
                        grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+</br>');
                }

                return div;
            };

            legend.addTo(map);



            geojson = L.geoJson(data,{style: style,onEachFeature: onEachFeature}).addTo(map);


        }

        function getColor(d) {

            return  d > .7 ? '#800026' :
                    d > .5  ? '#BD0026' :
                    d > .3  ? '#E31A1C' :
                    d > 0  ? '#FC4E2A' :
                    d > -.3   ? '#FD8D3C' :
                    d > -.5   ? '#FEB24C' :
                    d > -.7   ? '#FED976' :
                               '#FFEDA0';
        }

        function style(feature) {
            return {
                fillColor: getColor(feature.sentiment),
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7
                };
        }
        function highlightFeature(e) {
            var layer = e.target;

            layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });

        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
            }
        info.update(e);
        }

        function resetHighlight(e) {
            geojson.resetStyle(e.target);
        }

        function onEachFeature(feature, layer) {
            layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: regionClicked
            });

            info.update();
        }

        function regionClicked(e)
        {
            var zipcode = e.target.feature.id;
            var url = "/data/zipcode/"+zipcode;
            return alert(scope.getData(url));
        }   

    };

    return {
        restrict: 'A',
        template: "<div id=\"map\"></div>",
        link: linker
    };
});

regionClicked(e)是函数执行鼠标单击并进行ajax调用以返回Plotly URL的函数.

我遵循AngularJS的原则,但是对于LeafletJS,我发现很难使这个应用程序像Angular一样.

编辑:我重构了代码,使其更具代表性.我现在有一个返回url的控制器.为了清楚起见,我想用iframe格式嵌入替换模板来嵌入从ajax调用中收到的url.

Answer 1

以下是如何实现控制器和指令之间的通信的示例：Plunker。它非常简单，但演示了这个想法。一旦你理解了它，你就可以做一些变化。

沟通的频率：

• 实现控制器中的功能
• 将它们传递给指令
• 需要时从指令内调用它们（如果需要，不要忘记调用 $scope.$apply() ）