Question

我正在尝试使用angularjs和传单一起解决问题。但这个一般性问题困扰了我一段时间，因此解决方法是一个很好的领导“我是否从一个有棱角的角度以正确的方式做到这一点？”

问题：

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

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

这里有几个问题： 1.指令是否应回调控制器以获取该指令随后侦听的数据？ 2.我对该指令的调用看起来像是一个黑客，因为我必须得到范围，如果一个'刚刚编译'的元素感觉像是一个黑客：

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秒，这是一个糟糕的用户体验。

我唯一留下的是试图自己调整传单的大小，甚至不确定从哪里开始，或者这是一个好主意。

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

提前致谢。

Answer 1

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

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

内容获取服务通过使用promise来工作，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的丑陋也是如此。

以下是fiddle

如果您有疑问，请告诉我

Angularjs控制从指令到控制器的流回到指令

1 个答案: