javascript - イオン リーフレット angularjs ディレクティブ - Service を介してサイド メニューで tileLayer を切り替える

Question

leaflet-angularjs-directive の ionic アプリの開発をテストしようとしています。私が試してみるデモはあまりありません。

私が使用している: calendee (github) による ionic-leafletjs-map-demo https://github.com/calendee/ionic-leafletjs-map-demo

そして、LocationsService を別のサービスである HistoricalMapService に再現しようとしています。その HistoricalMapService を追加すると、「ionic serve」の Web ページ ビューが空白になります。私がコメントしたとき、ウェブページは機能していますが、HistoricalMapService を使用していませんでした。

これがmapController.js（js/controller/mapController.js）の私のコードです

angular.module('starter').controller('MapController',
  [ '$scope',
    '$cordovaGeolocation',
    '$stateParams',
    '$ionicModal',
    '$ionicPopup',
    'LocationsService',
    /*'HistoricalMapService',*/
    'InstructionsService',
    function(
      $scope,
      $cordovaGeolocation,
      $stateParams,
      $ionicModal,
      $ionicPopup,
      LocationsService,
      /*HistoricalMapService,*/
      InstructionsService
      ) {

  /**
   * Once state loaded, get put map on scope.
   */
  $scope.$on("$stateChangeSuccess", function() {

    $scope.locations = LocationsService.savedLocations;
    $scope.newLocation;

    if(!InstructionsService.instructions.newLocations.seen) {

      var instructionsPopup = $ionicPopup.alert({
        title: 'Add Locations',
        template: InstructionsService.instructions.newLocations.text
      });
      instructionsPopup.then(function(res) {
        InstructionsService.instructions.newLocations.seen = true;
        });

    }

    $scope.map = {
      defaults: {
        tileLayer: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17'
      },
      center: {
        lat: 1.355,
        lng: 103.840, 
        zoom: 14,
        minZoom: 12,
        maxZoom: 18,
        zoomControlPosition: 'topleft'
      },
      markers : {},
      events: {
        map: {
          enable: ['context'],
          logic: 'emit'
        }
      }
    };

    //$scope.goTo(0);
    $scope.locate();

  });

  var Location = function() {
    if ( !(this instanceof Location) ) return new Location();
    this.lat  = "";
    this.lng  = "";
    this.name = "";
  };

  $ionicModal.fromTemplateUrl('templates/addLocation.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
      $scope.modal = modal;
    });

  /**
   * Detect user long-pressing on map to add new location
   */
  $scope.$on('leafletDirectiveMap.contextmenu', function(event, locationEvent){
    $scope.newLocation = new Location();
    $scope.newLocation.lat = locationEvent.leafletEvent.latlng.lat;
    $scope.newLocation.lng = locationEvent.leafletEvent.latlng.lng;
    $scope.modal.show();
  });

  $scope.saveLocation = function() {
    LocationsService.savedLocations.push($scope.newLocation);
    $scope.modal.hide();
    $scope.goTo(LocationsService.savedLocations.length - 1);
  };

  /**
   * Center map on specific saved location
   * @param locationKey
   */
  $scope.goTo = function(locationKey) {

    var location = LocationsService.savedLocations[locationKey];

    $scope.map.center  = {
      lat : location.lat,
      lng : location.lng,
      zoom : 12
    };

    $scope.map.markers[locationKey] = {
      lat:location.lat,
      lng:location.lng,
      message: location.name,
      focus: true,
      draggable: false
    };

  };

  $scope.goToMapYear = function(histmap) {

    var histmap = HistoricalMapService.locateMapYear[histmap];

    console.log("Map Year: " + histmap.name);
    console.log("Map Layer: " + histmap.tileLayer);

    $scope.map = { 
      defaults: {
        tileLayer: histmap.tileLayer
        },
      center: {
        lat: 1.355,
        lng: 103.840, 
        zoom: 14,
        minZoom: 12,
        maxZoom: 18,
        zoomControlPosition: 'topleft'
      },
      markers : {},
      events: {
        map: {
          enable: ['context'],
          logic: 'emit'
        }
      }
    };

  };

  /**
   * Center map on user's current position
   */
  $scope.locate = function(){

    $cordovaGeolocation
      .getCurrentPosition()
      .then(function (position) {
        $scope.map.center.lat  = position.coords.latitude;
        $scope.map.center.lng = position.coords.longitude;
        $scope.map.center.zoom = 15;

        $scope.map.markers.now = {
          lat:position.coords.latitude,
          lng:position.coords.longitude,
          message: "You Are Here",
          focus: true,
          draggable: false
        };

      }, function(err) {
        // error
        console.log("Location error!");
        console.log(err);
      });

  };

}]);

ここに私のhistoricalMapService（js/services/historicalMapService.js）があります：http://pastebin.com/mYsU0Dpk

そして私のmenu.html（templates/menu.html）は次のとおりです：

<ion-nav-bar class="bar-positive nav-title-slide-ios7">
  <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>

</ion-nav-bar>

<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

<header class="bar bar-header bar-stable">
  <h1 class="title">Map Year</h1>
</header>

<ion-content class="has-header">

  <ion-list>

    <!--<ion-item nav-clear menu-close ng-click="goTo(locationKey)" ng-repeat="(locationKey,location) in locations track by location.name">
      {{location.name}}
    </ion-item>-->

    <ion-item nav-clear menu-close ng-click="goToMapYear(histmap)" ng-repeat="(histmap,mapyear) in mapyears track by mapyear.name">
      {{mapyear.name}}
    </ion-item>

  </ion-list>

</ion-content>

レイヤーの名前を表示するにはどうすればよいですか?ユーザーがそれをクリックすると、TMS TileLayer でマップが切り替わりますか?

助けてくれてありがとう。