angularjs - Ionic-Cordova-Angular 应用程序中的传单全屏

Question

我正在使用 Ionic-Cordova-Angular 开发 map 应用程序，并尝试使用 Leaflet。我的问题是我无法让 Leaflet map 自动填充整个视口(viewport)。

我在使用直接JS时找到了解决方案。您可以使用 CSS 将 HTML 和 Body 的高度设置为 100%，然后将 map div 也设置为 100%。您可以在 JSFiddle 中看到它的工作原理:https://jsfiddle.net/wzfLs10a/

不幸的是，当我将 Angular 引入其中时，相同的解决方案不起作用。这是一些示例代码:

Index.html

<div id="map" ng-app="demoapp" ng-controller="MainCtrl"></div>

App.js

angular.module("demoapp", ["controllers"]);

angular.module('controllers',[])

   .controller('MainCtrl',['$scope',
    function($scope) {
        $scope.map = L.map('map').setView([37.8, -96], 4);            
        L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg', {
        attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: '1234'
    }).addTo($scope.map);

    }]);

Style.css

html, body { height: 100%; width: 100%;}
#map { height: 100%;}

这是一个 JSFiddle:https://jsfiddle.net/3sv374Lz/ 。请注意，如果将 map div 的高度更改为固定值(例如 400px)，则会显示 map 。

我知道 Angular leaflet 指令，并且目前也在探索该选项，但在我看来，这确实不应该那么困难。我错过了一些简单的事情吗？感谢您的帮助!

Answer 1

如果使用ionic的内容和 View 类，则不需要将每个div设置为100%。

我在我的 ionic 应用程序中使用传单，代码如下:

<ion-view title="Map">
    <ion-content scroll="false" data-tap-disabled="true">
        <leaflet height="100%" width="100%"></leaflet>
    </ion-content>
</ion-view>

请注意，这使用了 leaflet Angular 模块 https://github.com/tombatossals/angular-leaflet-directive