0

我有一个网络应用程序，用户可以在其中创建事件并在地图上放置图钉，他/她还可以通过过滤器列表浏览事件。该地图由谷歌地图提供。因此，该应用程序包含 3 个主要组件：过滤器列表、新事件表单、地图。

我在想我应该如何使用 AngularJS 来构建它。以下是我正在尝试的内容以及遇到的问题。

我为事件表单创建了一个控制器，代表“新事件”的一个实例，它是用户创建的最新事件。在用户成功提交表单并验证所有内容后，用户可以单击地图放置图钉。当用户单击图钉时，它将显示表单中的事件信息。现在 drop pin 和 pin info 功能都由 Google 的 API 处理，它与控制器分离。然而，函数需要访问新事件的数据，这意味着我必须让它访问控制器的范围。

我可以提供对范围的访问，但我的直觉告诉我提供对外部功能的访问不是正确的做法。那么有什么更好的方法来构建它呢？或者我可能错了，授予范围访问权限是完全合法的，如果是这样，有人可以为我提供一些关于根本原因的见解吗？

4

1 回答 1

1

对于任何对同一主题感兴趣的人，经过一些研究，我认为我已经找到了正确的解决方案。答案不是在控制器之外提供范围访问（我认为这很糟糕），而是创建一个保存公共数据的服务。需要访问数据的控制器可以要求此服务并访问它们。

所以在我的特殊情况下，我需要为谷歌地图包装器制作另一个控制器，它将使用谷歌的 API 初始化地图，并处理所有地图功能。然后我创建了一个 newEvent 服务，它保存来自事件表单的数据，并且是事件控制器和地图控制器所需要的。事件控制器将数据写入服务，而地图控制器在适当的时间从服务中检索数据。

但是后来我发现我的地图控制器中的代码太多了，它需要初始化很多地图选项，为地图对象实现一些实用回调并使用 Google 的 API 注册它们。因此，我更进一步将所有这些功能纳入另一个服务。地图控制器将需要地图服务来处理 Google 的 API，随后地图服务将需要事件服务来检索事件数据。

所以现在我的应用看起来像这样：

newEventCtrl --- requires ---> eventService <------
                                                  |
mapCtrl --- requires ---> mapService ---requires---

以下是我发现非常有用的两篇文章：

问题

我现在唯一的问题是我需要通过 newEventCtrl 将我的表单字段直接绑定到事件服务中的数据，我不太喜欢它，因为我需要公开我的服务数据。

控制器.js：

var newEventCtrl = function($scope, eventService) {
    $scope.newEvent = eventService;
    ...
}

服务.js：

...
module.service('eventService', function() {
    ...
    return {
        eventName: '',
        ...
        }
});
...

HTML：

...
<input ng-model='newEvent.eventName'>
...

我不喜欢直接公开服务数据，而是希望有一个不错的 API，但我没有找到将 API 函数绑定到输入字段以便它们自动更新的方法。欢迎任何建议。

于 2013-01-10T17:17:14.503 回答