angular.js路由和地图问题

Question

I have a problem that when i using a Routing, I don't understand why but maps duplicate, instead one map i have two.

Html file:

<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-wrapper { margin-top: 30px; position: relative; height: 310px; width: 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

Just remove ng-controller="twoCtrl" from your html code

<div id="contacts" ng-controller="twoCtrl">

You have already assigned it in your $routeConfig