通常非 Angular 库实例化对象并将其绑定(bind)到 DOM 并提供使用它的函数，在我的例子中是 openlayers 3 中的“ map ”。
我如何最好地以 Angular 处理这样的库，以允许我使用应用程序每个部分的“对象”？
- 保存实例并为实例包装可调用函数的服务？
- 我以某种方式与之通信的指令(我猜主要是服务)持有实例？
- 我直接调用所有内容的全局对象？ (听起来是个很糟糕的方法)
- 将它全部放在一个实用对象中，用我自己的东西包装/扩展 openlayers 函数并在任何地方访问它？
对于另一个项目，我想重用尽可能多的遗留代码，并将所有必要的东西包装在实例化 map 对象的服务中。
对于一个新项目，我没有遗留代码，可以自由行动。
像 azimuthjs ( https://github.com/mpriour/azimuthjs ) 这样的 openlayers 指令库不是真正的解决方案
最佳答案
一种选择是使用“主” Controller ，靠近由 Angular 管理的 DOM 树，并在该主 Controller 中创建和存储“ map ”对象。
将 map 对象存储在由 Angular 管理的 DOM 中“低”的 Controller 中，可以与 Angular 应用程序的其他范围/组件共享/传递 map 。
JS代码:
function MainController() {
this.map = new ol.Map({
// ...
});
}
HTML代码:
<!DOCTYPE>
<html ng-app='app'>
<head>
<title>Simple example</title>
...
</head>
<body ng-controller="MainController as ctrl">
<div id="map" map-directive="ctrl.map"></div>
</body>
</html>
在上面的示例中，在页面主体上创建了一个“主” Controller 。该 Controller 创建并存储 OpenLayers map 。
然后 map 被传递给 map-directive，它负责将 map 插入 DOM(指令的 link 函数调用 setTarget在 map 上)。同样， map 可以传递给应用程序的其他指令。
这种方法是我们在 ngeo 中采用的方法项目，其目标是提供指令和服务，以简化基于 Angular 和 OpenLayers 3 的应用程序的开发。
有关此方法的更多详细信息，请参阅“简单”示例(HTML、JS)和 ngeo-map ngeo 中的指令。您还可以查看其他 ngeo 示例。
关于javascript - 我如何最好地构建一个以大型重型非 Angular 库为中心的 Angular 应用程序(本例为 : openlayers map)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27670622/