在Angular 1.5組件中使用傳單？

Question

我正在嘗試構建一個包含Leaflet地圖的簡單Angular 1.5組件。

這裏是我的組件的JS：

// Extend the leaflet js to support the topo module 
L.TopoJSON = L.GeoJSON.extend({ 
    addData: function(jsonData) { 
    if (jsonData.type === "Topology") { 
     for (var key in jsonData.objects) { 
     geojson = topojson.feature(jsonData, jsonData.objects[key]); 
     L.GeoJSON.prototype.addData.call(this, geojson); 
     } 
    } else { 
     L.GeoJSON.prototype.addData.call(this, jsonData); 
    } 
    } 
}); 

angular 
    .module('synthApp') 
    .component('map', { 
    templateUrl: 'app/components/map.template.html', 
    controller: MapController, 
    bindings: { 
     name: '@' 
    } 
    }); 

MapController.$inject = [ 
    '$window', 
    '$rootScope' 
]; 

function MapController(
    $window, 
    $rootScope 
) { 

    var $ctrl = this; 

    $ctrl.map = null; 
    $ctrl.markers = []; 

    // Set layer style 
    $ctrl.handleLayer = function(layer) { 
    layer.setStyle({ 
     fillColor: '#eee', 
     weight: 1, 
     opacity: 1, 
     color: '#aaa', 
     fillOpacity: 1, 
     clickable: false 
    }); 
    }; 

    $ctrl.$onInit = function() { 
    $ctrl.map = $window.L.map($ctrl.name, { 
     maxZoom: 10, 
     minZoom: 1, 
     scrollWheelZoom: false, 
     attributionControl: false, 
     tap: false, 
     touchZoom: true, 
     zoomControl: true, 
     crs: $window.L.CRS.EPSG4326 
    }); 

    var topoLayer = new $window.L.TopoJSON(); 
    var td; 
    $.getJSON("../map.json", function(json) { 
     td = json; 
     console.log(td); 
    }); 

    topoLayer.addData(td); 
    topoLayer.addTo($ctrl.map); 
    topoLayer.eachLayer($ctrl.handleLayer); 

    $ctrl.map.setView([0,0], 2); 
    }; 
} 

這裏是app/components/map.template.html內容：

<div id="$ctrl.name" style="background:#c2dfff;height:500px;width:100%"> 

我試圖使用像這樣的組件：

<map name="rt-world-2"></map> 

但是，我在地圖組件的init的線路上看到發生了錯誤Error: Map container not found.，因此我將其稱爲$ctrl.map = $window.L.map($ctrl.name, {...})。

將Angular與Leaflet結合使用會有一些限制嗎？任何想法錯誤信息的含義？

Answer 1

在模板：

<div id="$ctrl.name" style="background:#c2dfff;height:500px;width:100%"> 

與id="{{$ctrl.name}}"

替換的結合表達爲id屬性，然後用$timeout包住地圖初始化，以確保模板呈現：

$ctrl.$onInit = function() { 
    $timeout(function() { 
     //map initialization goes here.. 
    }); 
}; 

示例

angular 
 
    .module('synthApp', []) 
 
    .component('map', { 
 
     //templateUrl: 'map.template.html', 
 
     template: '<div id="{{$ctrl.name}}" style="background:#c2dfff;height:500px;width:100%"/>', 
 
     controller: MapController, 
 
     bindings: { 
 
      name: '@' 
 
     } 
 
    }); 
 

 
MapController.$inject = [ 
 
    '$window', 
 
    '$rootScope', 
 
    '$timeout' 
 
]; 
 

 
function MapController(
 
    $window, 
 
    $rootScope, 
 
    $timeout 
 
) { 
 

 
    var $ctrl = this; 
 
    
 

 
    $ctrl.map = null; 
 
    $ctrl.markers = []; 
 

 

 

 
    $ctrl.$onInit = function() { 
 
     $timeout(function() { 
 
      
 
      $ctrl.map = $window.L.map($ctrl.name, { 
 
       maxZoom: 10, 
 
       minZoom: 1, 
 
       scrollWheelZoom: false, 
 
       attributionControl: false, 
 
       tap: false, 
 
       touchZoom: true, 
 
       zoomControl: true, 
 
       crs: $window.L.CRS.EPSG4326 
 
      }); 
 

 
      $ctrl.map.setView([0, 0], 2); 
 

 
      $window.L.tileLayer(
 
       'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
 
       { maxZoom: 18 }).addTo($ctrl.map); 
 
     }); 
 

 
    }; 
 
}

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 
 
<script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> 
 

 

 
<div ng-app="synthApp"> 
 
    <map name="rt-world-2"></map> 
 
</div>