同じページに2つの異なるマップを持たせる方法

Question

私は角とリーフレットの両方に新しいです。同じページで2つのマップを取得しようとしましたが、2番目のマップを追加するとエラーが表示されます。エラー：[ng：areq]引数 'bFC'は関数ではありません。私は解決策を探しましたが、2つの異なるgeoJSONファイルのセットを扱うために、最も短い継ぎ目になりました。どんな助けもありがとう、ありがとう！ここで

は私のコードです：

**index.html** 
<div class="container"> 
<!-- BaseMap --> 
<div ng-controller="bFC"> 
    <h1>First Step Basic Map</h1> 
    <leaflet width="100%" height="480px"></leaflet> 
</div> 

<!-- CenterMap --> 
<div ng-controller="centerMap"> 
    <h1>Center Map</h1> 
    <leaflet lf-center="dc"width="100%" height="480px"></leaflet> 
    <ul> 
     <li><input type="number" step="any" ng-model="dc.lat" />Latitude</li> 
     <li><input type="number" step="any" ng-model="dc.lng" />Longitude</li> 
     <li><input type="number" step="any" ng-model="dc.zoom" />Zoom</li> 
    </ul> 
</div> 


</div> 

**baseMap.ctr.js** 

(function() { 

"use strict"; 

angular 
    .module("demomap", ['leaflet-directive']) 
    .controller("bFC", bFC); 

function bFC($scope) { 

} 

})(); 


**centerMap.ctr.js** 

(function() { 

"use strict"; 

angular 
    .module("demomap", ['leaflet-directive']) 
    .controller("centerMap", centerMap); 

function centerMap($scope) { 
    angular.extend($scope, { 
     dc : { 
      lat: 38.91, 
      lng: -77.03, 
      zoom: 4 
     } 
    }); 

} 

})(); 

Answer 1

あなたがこれを行う場合は、新しいモジュールを作成します。

angular.module('myModule', [...]); 

あなたが存在するモジュールを取得したい場合は、このような第二引数を削除する必要があります：

angular.module('myModule'); 

centerMap.ctr.jsのモジュールdemomapが複製されています。新しいモジュールが作成され、baseMap.ctr.jsのモジュールが置き換えられます。ちょうど、centerMap.ctr.jsのモジュール関数の2番目の引数を削除します。