在角度組件中使用傳單

-1

我在Angular工作流程中頗爲新穎。我正在嘗試使用Leaflet將地圖添加到我的頁面。我想通過組件來完成。我遵循了兩條指令（在評論中列出）以使其發生（徒勞）。在角度組件中使用傳單

您可以在這裏看到的結果： http://oye-api.herokuapp.com/test.html

但是我什麼都沒有。沒有地圖，但也沒有錯誤。我不知道我做錯了什麼。你能幫我嗎？

謝謝！

這是我有：

page.html中

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 
 
<script src="bower_components/angular/angular.js"></script> 
 
    <script src="bower_components/angular-route/angular-route.js"></script> 
 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
 
    <script src="bower_components/angular-mocks/angular-mocks.js"></script> 
 

 
<script src="app.module.js"></script> 
 
<script src="map/map.module.js"></script> 
 
    <script src="map/map.component.js"></script> 
 

 
<map></map>

map.component.js

angular. 
 
    module('map'). 
 
    component('map', { 
 
    templateUrl: 'map/map.template.html', 
 
    controller: MapController 
 
    } 
 
); 
 

 
MapController.$inject = ['$scope']; 
 

 
function MapController($scope) { 
 
    var ctrl = this; 
 
    angular.extend(ctrl, { 
 
     san_fran: { 
 
      lat: 37.78, 
 
      lng: -122.42, 
 
      zoom: 13 
 
     }, 
 
     events: {}, 
 
     layers: { 
 
      baselayers: { 
 
       osm: { 
 
        name: 'OpenStreetMap', 
 
        url: 'https://{s}.tiles.mapbox.com/v3/examples.map-i875mjb7/{z}/{x}/{y}.png', 
 
        type: 'xyz' 
 
       } 
 
      } 
 
     }, 
 
     defaults: { 
 
      scrollWheelZoom: false 
 
     } 
 
    }); 
 
}

map.template.html

<leaflet center="san_fran" markers="markers" event-broadcast="events" defaults="defaults" id='map'></leaflet>

app.module.js

'use strict'; 
 

 
angular.module('oyeApp', [ 
 
    'ngRoute', 
 
    'map' 
 
]);

map.module.js

'use strict'; 
 

 
angular.module('map', [ 
 
    'ngRoute' 
 
]);

來源

2016-11-03 Guillaume W

我試圖說明如下： - http://blog.thehumangeo.com/angular -component-syntax.html - https://coderwall.com/p/cfj6da/how-to-use-the-angular-leaflet-directive –

添加CSS類顯示地圖div 參考以下鏈接： http://leafletjs.com/examples/quick-start/

來源

2016-11-03 18:30:27

謝謝你的回答，但這不是問題。我明白，我的解釋可能不清楚，所以這裏是一個測試頁面：http：//oye-api.herokuapp.com/test.html –

在角度組件中使用傳單

回答

相關問題