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

由于演示使用的是旧版本，因此我使用的是更新的angular-spool-directive.min.js 0.7.15

我无法生成全屏按钮，如图所示：

mapController.js中的My$scope.map：

    $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'
        }
      }          
    };

My 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>

---

很久以前，我一直在使用全屏控件，并添加了如下内容：

首先创建按钮：

var fullScreenCtrl = L.control.fullscreen();

然后添加按钮：

controls : { custom : [ fullScreenCtrl ] }

---

你试过给它一个固定的高度和宽度吗？@kachhalimbu我有两张地图传单。我试着给出一个固定的高度和宽度，但它不起作用。全屏按钮根本不存在，控件也不出现。

var fullScreenCtrl = L.control.fullscreen();

controls : { custom : [ fullScreenCtrl ] }