简单的 Openlayers + Angular答案

【问题标题】：Simple Openlayers + Angular简单的 Openlayers + Angular
【发布时间】：2015-09-17 10:40:05
【问题描述】：

我正在尝试使用 angular 实现简单的 openlayers 地图

我找不到此错误的解决方案：

未捕获的错误：

[$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381 )

我做错了什么？

【问题讨论】：

这似乎是某种依赖注入问题看看这个 fiddle 它正在工作，也许你错过了什么jsfiddle.net/tianhai/r4w5r
这个“jsfiddle.net/tianhai/r4w5r – stackg91”是angular 1.1版本。我正在使用 1.3，这个例子不再工作了

标签： angularjs openlayers

【解决方案1】：

app.controller 是一个函数。

这里是很好的语法：

app.controller('myController',function() {

    var map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:4326"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        layers: [
        new OpenLayers.Layer.OSM()]
    });

    if (!map.getCenter()) {
        map.zoomToMaxExtent();
    }
    // return map; <- this should not be done. I don't understand what you're trying to do with a controller
});

在 Angular 中，控制器用于将数据和函数绑定到您的 html 视图。控制器不是您调用以获取返回结果的函数。您调用定义在控制器中的函数。例如：

angular.module("app", []);
angular.module('app').controller('someController', function(){
    var self = this;

    self.hello = "World";

    self.alertMe = function(){
        alert("HELLO");
    };
});

和 html ：

<body ng-app="app">
   <div ng-controller="someController as example" 
        ng-click="example.alertMe()">
            Hello {{example.hello}} 
   </div>
</body>

会有结果：

Hello World

如果你点击它，它会打开一个警报。

【讨论】：

哇。非常感谢您的详尽回答。现在我更好地理解了控制器的想法。但根据我的真实问题，这个没有“返回地图”的新提案仍然行不通....