传单在展示和隐藏中引发了棱角分明的困境?想要摆脱$timeout

Question

我正在创建一个传单，其中调用了L.map（'maplement'）。问题是，如果我点击一个"隐藏"传单地图的按钮，然后再次点击该按钮显示，传单地图就不会显示。然而，当我在创建映射之前在链接函数中放入setTimeout并将其设置为2秒时，映射每次都会显示（尽管我必须等待2秒）。除了在我的自定义"传单地图"指令中使用$timeout来显示和隐藏之外，还有更好的选择吗？

Answer 1

我在没有看到任何代码的情况下创建了一个传单地图指令的天真示例，并通过ng-show切换地图的显示。它在没有任何$timeout的情况下工作。在没有看到任何代码或不知道如何切换地图显示的情况下，很难诊断出问题的根源。

angular.module('demo', [])
.directive('leafletMap', function() {
  return {
    restrict: 'E',
    scope: {
      mapOptions: '&'
    },
    template: '<div><button ng-click="toggleShow()">Toggle Map</button><div class="demo-map" ng-show="isShown"></div></div>',
    link: function(scope, elem, attrs) {
      // Find element to bind to map
      var mapElem = elem.children().find('div')[0],
        // get map options from isolate scope
        mapOptions = scope.mapOptions();
      // State of hide/show
      scope.isShown = true;
      // Create Map.
      var map = L.map(mapElem, mapOptions);
      // Just taken from leaflet example
      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
          '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
          'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
      }).addTo(map);
      // method to toggle the shown/hidden state of map
      scope.toggleShow = function() {
        scope.isShown = !scope.isShown;
      };
      // cleanup on element destroy
      elem.on('$destroy', function() {
        map.remove();
      });
    }
  };
})
.controller('DemoController', function() {
  this.mapOptions = {
    center: [51.505, -0.09],
    zoom: 13
  };
});

.demo-map {
  height: 500px;
}

<script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<div ng-app="demo" ng-controller="DemoController as ctrl">
  <leaflet-map map-options="ctrl.mapOptions"></leaflet-map>
</div>

Answer 2

CSS能帮你吗？

在可见div 中创建一个地图

visibility: visible

在隐藏的div 中创建第二个映射

visibility: hidden

将两个div放在的同一位置

position: absolute

当你想切换时，只需更改divs 的可见性

示例：http://plnkr.co/edit/voTjyMLKTxUC183nf8ML?p=preview（对不起，它不是有角度的）