从指令Angularjs控制流量控制器返回指令 [英] Angularjs control flow from directive to controller back to directive

问题描述

我试图用angularjs要解决一个问题，单张在一起。但这个普遍的问题一直困扰着我，而这样的解决方法是一个很好的领先优势进入我是连这个做从角的角度以正确的方式？

I am trying to work around an issue using angularjs and leaflet together. But this general question has plagued me for a while so the workaround is a good lead into 'am I even doing this the right way from an angular perspective?'

问题：

我使用的是单张地图，我想用它的弹出窗口来显示我的地图上的点的其他数据。我打算在地图上展示了不少分。什么是很多吗？够了，当我查询服务器分我只抢ID（用于以后更多的数据查询）和几何（这样我就可以绘制点）。在点击的地步，我想伸手到服务器，以获得所有与该特定点相关的数据，并在弹出的显示出来。

I am using a leaflet map and I would like to use its popups to display additional data about my points on the map. I intend to display a lot of points on the map. What is a lot? Enough that when I query the server for points I only grab the id (used to query later for more data) and the geometry (so I can plot the point). On 'click' of the point I would like to reach out to the server to get all the data that is associated with that particular point and display it in the popup.

我有控制的被单张（单张指令）相关DOM一切事物的角度指令。该指令是对于像'点击'上的一个点什么监听。当发生这种情况我的指令返回到控制器，该控制器然后询问服务器有关点的数据，并在一范围的变量，使得HTML模板可以将数据填写填充。

I have an angular directive that controls all things in the DOM that are related to leaflet (leaflet directive). That directive is what listens for things like 'click' on a point. When this happens my directive goes back to a controller, that controller then asks the server for the data about the point and fills in a scope variable such that the HTML template can 'fill in' the data.

一对夫妇在这里的问题：
1.应指示回调控制器来获取数据的指令，然后监听？
2.我的指令调用似乎是一个黑客，因为我必须得到的范围，如果什么感觉就像一个黑客攻击了刚编译元素：

A couple of questions here: 1. Should directives call back to controllers to get data that the directive then listens for? 2. My call to the directive seems like a hack as I have to get the scope if a 'just compiled' element in what feels like a hack:

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

在的问题。传单是不是捡了HTML已更新弹出窗口被渲染之后。这会导致宽度问题，因为弹出不够宽，以适合文本。这里是一个普拉克：

On to the problem. Leaflet is not picking up that the HTML has been updated just after the popup has been rendered. This causes a width issue as popup is not wide enough to fit the text. Here is a plunk:

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

我已经尝试了几件事情要解决这个无济于事。我能想出的最好的是做这样的事情：

I have tried a few things to solve this to no avail. The best I could come up with is to do something like this:

  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（）功能。控制器的范围

However that did not quite work as newScope is not really the scope for the controller that has the 'getContent()' function.

最后，即使这没有工作，它可能不是一个很好的解决方案，因为让刚刚说我的服务器很慢，需要3秒返回的数据。这意味着，我甚至不会显示3秒弹出的点击这是一个可怕的用户体验了。

Lastly even if this did work its probably not a great solution because lets just say my server is slow and takes 3 seconds to return data. That means I would not even show the popup for 3 seconds after the click which is a horrible user experience.

这是我留下试图调整我自己，甚至不知道从哪里开始或单张弹出的​​唯一一件事，如果这是一个好主意。

The only thing that I am left with is trying to resize the leaflet popup on my own, not even sure where to start or if that is a good idea.

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

Any and all help and criticism (with resize issue and angular use) is welcome and appreciated.

先谢谢了。

推荐答案

在我的解决方案，我让服务能够访问那些地图和通信，后端为内容的其他服务上的标记。

In my solution I'm allowing a service to have access to the markers that are on the map and another service which communicates to the backend for content.

访问标记该服务允许我补充一个指令来弹出并将其绑定到一个标记。弹出指令可以具有由检索到的数据填写的附加信息。

The service that accesses the marker allows me to add a directive for the popup and bind it to a marker. The popup directive could have additional information that is filled out by the retrieved data.

内容通过一个承诺，它与数据时，后端的回报解决获取服务工程。我只是用一个$超时，但您将使用HTTP $

The content getting service works by using a promise, which is resolved with the data when the backend returns. I just used a $timeout, but you will be using $http.

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

弹出服务结合到标记（与如果需要的一些默认元素），并等待对内容

The popup service binds to the marker (with some default elements if needed) and waits for the content.

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

现在我只是从超时返回HTML，但是可能您将使用的承诺里面的内容或绑定返回数据的范围，以更新HTML。

Now I'm just returning html from the timeout, but likely you will either use the promise inside the content or bind the return data to the scope to update the html.

在这里，我们走了，现在当返回数据的弹出获得新的数据。此外，您可能希望保留你的标记在控制器中，所以避免甚至与map_service丑陋。

And here we go, now when the data is returned the popup gets the new data. Additionally you may want to keep your markers in the controller, so even the ugliness with the map_service is avoided.

下面是小提琴

让我知道如果您有任何疑问

Let me know if you have questions

这篇关于从指令Angularjs控制流量控制器返回指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！