1

我正在尝试同时使用 angularjs 和传单来解决问题。但是这个普遍的问题已经困扰了我一段时间，所以解决方法是一个很好的引导到“我什至从角度来看这样做是正确的方式吗？”

问题：

我正在使用传单地图，我想使用它的弹出窗口在地图上显示有关我的点的其他数据。我打算在地图上显示很多点。什么是很多？够了，当我向服务器查询点时，我只获取 id（用于稍后查询更多数据）和几何（所以我可以绘制点）。在“点击”该点时，我想联系服务器以获取与该特定点关联的所有数据并将其显示在弹出窗口中。

我有一个角度指令，它控制 DOM 中与传单相关的所有内容（传单指令）。该指令用于侦听某个点上的“点击”之类的内容。当发生这种情况时，我的指令返回到控制器，然后该控制器向服务器询问有关该点的数据并填写范围变量，以便 HTML 模板可以“填写”数据。

这里有几个问题： 1. 指令是否应该回调控制器以获取指令随后监听的数据？2. 我对指令的调用似乎是一个 hack，因为如果一个“刚刚编译”的元素感觉像是一个 hack，我必须获得范围：

angular.element(e).scope().getContent();

关于问题。Leaflet 没有在弹出窗口被渲染后发现 HTML 已经更新。这会导致宽度问题，因为弹出窗口的宽度不足以容纳文本。这是一个小插曲：

http://plnkr.co/edit/53bebb?p=preview

我尝试了一些方法来解决这个问题，但无济于事。我能想到的最好的方法是做这样的事情：

  var newScope = $scope.$new();
  var e = $compile('<div popup></div>')(newScope);

  // don't bind yet, size problem
  //marker.bindPopup(e[0]);

  // listen for the click, then get data from server to fill in template
  marker.on('click', function() {
    angular.element(e).scope().getContent();
  });

  newScope.$watch("content", function(content) {
    if (!content) return;
    // now bind and open the popup as we should already have the content
    marker.bindPopup(e[0]).openPopup();
  }

然而，这并不完全有效，因为 newScope 并不是具有“getContent()”功能的控制器的真正范围。

最后，即使这确实有效，它也可能不是一个很好的解决方案，因为可以说我的服务器很慢并且需要 3 秒才能返回数据。这意味着我什至不会在点击后 3 秒内显示弹出窗口，这是一种可怕的用户体验。

我唯一剩下的就是尝试自己调整传单弹出窗口的大小，甚至不确定从哪里开始，或者这是否是个好主意。

欢迎和赞赏任何和所有帮助和批评（调整大小问题和角度使用）。

提前致谢。

4

1 回答 1

1

在我的解决方案中，我允许一个服务访问地图上的标记，以及另一个与后端通信以获取内容的服务。

访问标记的服务允许我为弹出窗口添加指令并将其绑定到标记。弹出指令可以具有由检索到的数据填写的附加信息。

内容获取服务使用 Promise 工作，当后端返回时使用数据解析。我只是使用了 $timeout，但您将使用 $http。

me.GetData = function() {
    var def = $q.defer();
    $timeout(function() {
        def.resolve('<span> wooo! </span>');
    }, 2000);
    return def.promise;
};

弹出服务绑定到标记（如果需要，可以使用一些默认元素）并等待内容。

map_service.marker.bindPopup(pop);
map_service.marker.on('click', function() {
    content.GetData().then(function(data) {
        pop.setContent(data);
    });
});

现在我只是从超时返回 html，但您可能会在内容中使用 promise 或将返回数据绑定到范围以更新 html。

现在我们开始了，现在当返回数据时，弹出窗口会获取新数据。此外，您可能希望将标记保留在控制器中，因此即使是 map_service 的丑陋也可以避免。

这是小提琴

如果您有任何问题，请告诉我

于 2013-09-06T07:36:41.167 回答