2013-07-28 52 views
1

我正在尝试使用angularjs和传单一起解决问题。但是这个普遍的问题困扰了我一段时间,所以解决方法是一个很好的导向,“我是否从一个角度来看是正确的?”Angularjs控制从指令到控制器的流程返回指令

问题:

我使用的是单张地图,我想用它的弹出窗口来显示我的地图上的点的额外数据。我打算在地图上显示很多点。什么是很多?足够的是,当我查询服务器的点时,我只抓取id(用于稍后查询更多数据)和几何图形(以便我可以绘制点)。点击“点击”我想联系服务器以获取与该特定点关联的所有数据并将其显示在弹出窗口中。

我有一个角度指令,控制与传单(传单指令)有关的DOM中的所有内容。该指令是监听某个点上的“点击”之类的内容。发生这种情况时,我的指令返回给控制器,然后控制器向服务器请求关于点的数据并填充范围变量,以便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秒内显示弹出窗口,这是一种可怕的用户体验。

我唯一剩下的就是试图调整我自己的传单弹出窗口,甚至不知道从哪里开始或者如果这是一个好主意。

任何和所有的帮助和批评(与调整大小问题和角度使用)是受欢迎和赞赏。

在此先感谢。

回答

1

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

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

获取服务的内容通过使用承诺起作用,后者在后端返回时与数据一起解析。我只是使用$超时,但您将使用$ 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,但是有可能你会要么使用承诺里面的内容或绑定返回数据的范围,以更新HTML。

而现在我们走了,现在当数据返回时,弹出窗口获取新数据。另外,您可能希望将标记保留在控制器中,以避免使用map_service的丑陋。

这里是fiddle

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