angular.jsのルーティングとマップの問題

Question

ルーティングを使用すると、理由はわかりませんが、マップが重複する代わりに、1つのマップに2つありますという問題があります。

HTMLファイル：

<div id="contacts" ng-controller="twoCtrl"> 
    <section class="map-wrapper"> 
     <div class="maps" id="mapOne"></div> 
     <div class="maps" id="mapTwo"></div> 
    </section> 
</div> 

のCss： section.mapラッパー{ マージントップ：30px; 位置：相対; 身長：310px; 幅：100％; }

section.map-wrapper .maps { 
    position: absolute; 
    height: auto; 
    height: 310px; 
    width: 100%; 
    z-index: 0; 
    opacity: 0; 
    transition: opacity .5s; 
} 

section.map-wrapper .maps.active { 
    z-index: 1; 
    opacity: 1; 
} 

JS

var app = angular.module("myApp", ["ngRoute"]); 
app.config(function($routeProvider) { 
    $routeProvider 
    .when("/", { 
     templateUrl : "main.html", 
     controller: 'oneCtrl' 
    }) 
    .when("/contacts", { 
     templateUrl : "pages/contacts.html", 
     controller: 'twoCtrl' 
    }) 
}); 
app.controller('twoCtrl',function($scope){ 
    $(function() { 
     //maps' active classes 
      maps(); 
      function maps() { 
       $(".load-block:first").addClass('active'); 
       $(".maps:first").addClass('active'); 
       $(".office-block[id='office']").addClass("active"); 
       $("#office").click(function() { 
        $(".office-block[id='branch']").removeClass("active"); 
        $(".office-block[id='office']").addClass("active"); 
        $(".maps").removeClass("active"); 
        $("#mapOne").addClass("active"); 
       }); 

       $("#branch").click(function() { 
        $(".office-block[id='office']").removeClass("active"); 
        $(".office-block[id='branch']").addClass("active"); 
        $(".maps").removeClass("active"); 
        $("#mapTwo").addClass("active"); 
       }); 
      }; 

     //map 
    ymaps.ready(init); 
     var myMap1, 
      myMap2, 
      myPlacemark, 
      myPlacemark2 

     function init(){ 
      myMap1 = new ymaps.Map("mapOne", { 
       center: [50.0094033, 36.2345667], 
       zoom: 16, 
       controls: [] 
      }); 

      myMap2 = new ymaps.Map("mapTwo", { 
       center: [49.7118034, 37.6141396], 
       zoom: 16, 
       controls: [] 
      }); 

      myPlacemark = new ymaps.Placemark([50.0094033, 36.2345667], { 
       hintContent: 'Охрана и технологии', 
       balloonContent: 'г. Харьков, ул. Данилевского, 12 офис 22' 
      }, { 
       iconLayout: 'default#image', 
       iconImageHref: 'includes/icons/map-mark.png', 
       iconImageSize: [35, 35] 
      }); 

      myPlacemark2 = new ymaps.Placemark([49.7118034, 37.6141396], { 
       hintContent: 'Охрана и технологии', 
       balloonContent: 'г.Купянск, пл.Ленина, оф.34' 
      }, { 
       iconLayout: 'default#image', 
       iconImageHref: 'includes/icons/map-mark.png', 
       iconImageSize: [35, 35] 
      }); 

      myMap1.geoObjects.add(myPlacemark); 
      myMap2.geoObjects.add(myPlacemark2); 
     } 
    }); 

}); 

Answer 1

はちょうどあなたがすでに$ routeConfig