传单在显示和隐藏时出现角度问题？想要摆脱 $timeout答案

【问题标题】：Leaflet issues angular woes in showing and hiding? Want to get rid of $timeout传单在显示和隐藏时出现角度问题？想要摆脱 $timeout
【发布时间】：2016-05-20 21:43:47
【问题描述】：

我正在创建一个传单，并调用 L.map('mapelement')。问题是，如果我单击“隐藏”传单地图的按钮，然后再次单击该按钮以显示，传单地图不会显示。但是，当我在创建地图之前在链接函数中放入 setTimeout 并将其设置为 2 秒时，地图每次都会显示（尽管我必须等待 2 秒）。在我的自定义“leaflet-map”指令中使用 $timeout 来显示和隐藏是否有更好的选择？

【问题讨论】：

你能提供一些代码吗？
如何使用 $timeout(func,0);它只会将您的地图显示任务添加到执行队列的最后一个。
所以我将指令链接中的全部内容包装在一个“开始”函数中，其中我有：$timeout(function() { $timeout(start, 0); });。不得不强制等待似乎有点不稳定。我希望有一些“viewdidload”或我可以使用的一些事件。
更不用说，除非我将 $timeout 设置为 1000 毫秒，否则它不起作用。
当您再次显示地图（但失败）时，地图元素是否存在？它是灰色/空白吗？尺寸不对？任何控制台错误？您的自定义指令有问题？请发布一些代码，以便其他人可以测试，这很难猜测

标签： angularjs leaflet

【解决方案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>

【讨论】：

当我有 2 张传单地图并且我想切换一张与另一张的显示时会出现问题。每个都有不同的 ID。
如果您使用具有隔离范围的指令，则元素的 id 无关紧要。上面的代码直接通过元素引用使用地图。我可以将上面的代码修改为有两个从外部变量驱动的传单地图，但此时我只是在猜测，因为我还没有看到你想要做什么。

【解决方案2】：

CSS 对你有帮助吗？

在可见的 div 中创建一张地图

visibility: visible

在隐藏的 div 中创建第二个地图

visibility: hidden

将两个 div 放在同一位置

position: absolute

当您想要切换时，只需更改 div 的可见性

示例：http://plnkr.co/edit/voTjyMLKTxUC183nf8ML?p=preview （抱歉不是角）

【讨论】：