Question

我有一个网络应用程序，用户可以在地图上创建活动和放置图钉，他/她也可以通过过滤器列表浏览事件。该地图由Google地图提供。因此，该应用程序包含3个主要组件：筛选器列表，新事件表单，地图。

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

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

我可以提供对范围的访问，但我的直觉告诉我，访问外部功能是不正确的。那么有什么更好的方法来构建这个呢？或者我认为提供范围访问权限是完全合法的，如果是这样，有人可以让我对潜在原因有所了解吗？

Answer 1

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

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

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

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

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

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

问题

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

<强> controllers.js：

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

<强> services.js：

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

<强> HTML：

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

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

如何构建一个角度应用程序以在控制器之间共享数据？

1 个答案:

问题