AngularJS'de kitapçık haritası etkileşimi

Question

AngularJS'de oldukça yeniyim ve bir yönergeyle yüklenen bir Kitapçık uygulamasına sahibim. Broşür konfigürasyonu, vurgulanmış zipkodlarla bir harita oluşturan http://leafletjs.com/examples/choropleth.html'dan utanmadan alınır.

Soruma göre bir Plotly url döndüren ajax çağrısından bir url yüklemek istiyorum. Haritayı, Angular'ın içine yerleştirilmiş bir iframe ile nasıl değiştiririm.

Kontrol:

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

talimatı:

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) fonksiyonu fonksiyonu

kod yönergesi ile çok kaba ve çok saf bir JavaScript İkaz bir fare tıklaması harekete geçirir ve Plotly url'yi döndürmek için bir ajax çağrısı yapar.

AngularJS prensiplerini takip ediyorum, ancak LeafletJS ile bu uygulamayı yapmak için çok zor buluyorum Açısal gibi.

DÜZENLEME: Daha fazla basılabilir hale getirmek için kodu yeniden okudum. Artık url'yi döndüren bir denetleyicim var. Açıklığa kavuşturmak için, şablonu bir iframe ile değiştirmek istiyorum, ajax çağrısından alınan URL'yi yerleştirmek.

Answer 1

Denetleyici ile yönerge arasındaki iletişimi nasıl uygulayabileceğiniz bir örnek: Plunker. Oldukça basit ama bu fikri gösteriyor. Anladıktan sonra bazı varyasyonlar yapabilirsiniz.

iletişim nasıl gidiyor genelde:

• gerektiğinde direktif içinden diyoruz direktifi onları geçmek denetleyici işlevleri uygulamak ($ ​​kapsamını aramaya unutma. $ apply() gerekiyorsa)