ionic + angularjs传单指令：无法显示全屏

Question

我正在使用https://github.com/calendee/ionic-leafletjs-map-demo/更新的angular-leaflet-directive.min.js（0.7.15），因为演示使用的是旧版本。

我能不能产生全屏按钮，如图这里：https://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/controls/fullscreen-example

我的$ scope.map在mapController.js：

$scope.map = { 
     defaults: { 
     //tileLayer: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17', 
     //tileLayer: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png' 
      layers: { 
      baselayers: { 
      basemap: $scope.basemapLayers.basemap,    
      map2007: $scope.basemapLayers.map2007, 
      map1998: $scope.basemapLayers.map1998, 
      map1988: $scope.basemapLayers.map1988, 
      map1975: $scope.basemapLayers.map1975, 
      map1969: $scope.basemapLayers.map1969, 
      map1955: $scope.basemapLayers.map1955 
      } 
     }, 
     controls: { 
      //draw: {}, 
      //scale: true, 
      fullscreen: { 
      position: 'topleft' 
      } 
     }    
     }, 
     center: { 
     lat: 1.355, 
     lng: 103.840, 
     zoom: 14, 
     minZoom: 12, 
     maxZoom: 18 
     }, 
     markers : {}, 
     events: { 
     map: { 
      enable: ['click', 'context'], 
      logic: 'emit' 
     } 
     }  
    }; 

    $scope.map2 = { 
     defaults: { 
     //tileLayer: 'https://api.tiles.mapbox.com/v4/sla.c97ab90d/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2xhIiwiYSI6Ik15dE1uclUifQ.ZmSBZxWOZYCSW3m71abSzQ#17', 
     //tileLayer: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png' 
      layers: { 
      baselayers: { 
      map1955: $scope.basemapLayers.map1955, 
      map1969: $scope.basemapLayers.map1969, 
      map1975: $scope.basemapLayers.map1975, 
      map1988: $scope.basemapLayers.map1988, 
      map1998: $scope.basemapLayers.map1998, 
      map2007: $scope.basemapLayers.map2007, 
      basemap: $scope.basemapLayers.basemap 
      } 
     }, 
     controls: { 
      //draw: {}, 
      //scale: true,    
      fullscreen: { 
      position: 'topleft' 
      } 
     }    
     }, 
     center: { 
     lat: 1.355, 
     lng: 103.840, 
     zoom: 14, 
     minZoom: 12, 
     maxZoom: 18 
     }, 
     markers : {}, 
     events: { 
     map: { 
      enable: ['click', 'context'], 
      logic: 'emit' 
     } 
     }   
    }; 

我map.html：

<ion-view title="Historical Map"> 

    <ion-nav-buttons side="left"> 
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> 
    </ion-nav-buttons> 

    <ion-nav-buttons side="right"> 
    <button ng-click="locate();" title="Search" class="button button-icon icon ion-ios-search-strong"></button> 
    </ion-nav-buttons> 

<div class="row"> 

    <ion-content data-tap-disabled="true" class="col col-top" style="bottom: 50%";> 

     <leaflet id="map1" event-broadcast="map.events" defaults="map.defaults" center="map.center" controls="map.defaults.controls" markers="map.markers" layers="map.defaults.layers" width="100%" height="100%" ng-if="map"></leaflet> 

    </ion-content> 

    <ion-content data-tap-disabled="true" class="col col-bottom" style="top: 50%;"> 

     <leaflet id="map2" event-broadcast="map.events" defaults="map.defaults" center="map.center" controls="map2.defaults.controls" markers="map.markers" layers="map2.defaults.layers" width="100%" height="100%" ng-if="map2"></leaflet> 

    </ion-content> 

</div> 

    <ion-footer-bar class="bar-positive"> 

<div class="buttons pull-left"> 
    <button ng-click="locate();" title="Find Me" class="button button-icon icon ion-pinpoint" style="color: white;"> Find Me</button> 
</div> 

<div class="buttons pull-right">  
    <button data-ng-click="openModal();" data-ng-controller="MarkerController" title="Add Marker" class="button button-icon icon ion-edit" style="color: white;"> Add Marker</button> 
</div> 

<!--<div class="buttons pull-right"> 
    <button ng-click="runCamera();" title="Camera" class="button button-icon icon ion-camera" style="color: white;"> Camera</button> 
</div>-->  

</ion-footer-bar> 

</ion-view> 

my index.html：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title>Leaflet Demo</title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/leaflet.css" /> 
    <link rel="stylesheet" href="css/style.css" /> 

    <link href="lib/fullscreen/leaflet.fullscreen.css" rel="stylesheet"> 

    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <script src="lib/leaflet/leaflet.js"></script> 
    <script src="lib/leaflet/angular-leaflet-directive.min.js"></script> 

    <script src="lib/fullscreen/Leaflet.fullscreen.min.js"></script> 

    <script src="lib/ng-cordova.min.js"></script> 
    <script src="cordova.js"></script> 

    <script src="js/app.js"></script> 
    <script src="js/controllers/mapController.js"></script> 
    <script src="js/controllers/imageController.js"></script> 
    <script src="js/controllers/markerController.js"></script> 
    <script src="js/services/locationsService.js"></script> 
    <script src="js/services/instructionsService.js"></script> 
    <script src="js/directives/igTruncate.js"></script> 

</head> 

<body ng-app="starter" class="platform-ios platform-cordova platform-webview"> 
<ion-nav-view></ion-nav-view> 
</body> 
</html> 

前瞻：

http://i.imgur.com/22h0pzZ.jpg -- where the red-boxed shows the missing control layer for fullscreen. 

Answer 1

使用全屏幕控制在很久以前我曾经和补充它这样：

首先创建按钮：

var fullScreenCtrl = L.control.fullscreen(); 

然后添加按钮：

controls : { custom : [ fullScreenCtrl ] }