Interazione mappa leaflet in AngularJS

Question

Sono abbastanza nuovo per AngularJS e ho un'app Leaflet caricata tramite una direttiva. La configurazione del volantino viene presa spudoratamente da http://leafletjs.com/examples/choropleth.html che carica una mappa con i codici di avviamento postale evidenziati.

La mia domanda è che voglio caricare un url da una chiamata Ajax che restituisce un url Plotly. Come sostituire la mappa con un iframe incorporato graficamente in Angular.

Attenzione il codice è molto grezzo e per lo più puro javascript con la direttiva:

Controller:

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; 
    } 
}]); 

direttiva:

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) è la funzione in cui la funzione agisce con un clic del mouse e fa una chiamata ajax per restituire l'url Plotly.

Seguo i principi di AngularJS, ma con LeafletJS sto trovando molto difficile rendere questa app simile ad Angular.

MODIFICA: Ho rifattorizzato il codice per renderlo più presentabile. Ora ho un controller che restituisce l'url. Per chiarire, vorrei sostituire il modello con un iframe che incorpori graficamente l'url ricevuto dalla chiamata ajax.

Answer 1

Ecco un esempio di come è possibile implementare la comunicazione tra il controller e la direttiva: Plunker. È piuttosto semplice ma dimostra l'idea. Una volta capito, puoi fare alcune variazioni.

Come di solito la comunicazione va:

• implementare le funzioni del controller
• passarli alla direttiva
• li chiamano da dentro la direttiva in caso di necessità (non dimenticate di chiamare $ ambito. $ apply() se necessario)