0

ユーザーがイベントを作成して地図上にピンをドロップできるWebアプリがあります。また、フィルターのリストでイベントを参照することもできます。地図はグーグルマップによって提供されます。したがって、アプリには3つの主要なコンポーネントが含まれています。フィルターリスト、新しいイベントフォーム、マップです。

AngularJSを使用してこれをどのように設計する必要があるかを考えています。以下は私が試みていることと私がぶつかっている問題です。

ユーザーが作成した最新のイベントである「新しいイベント」のインスタンスを表す、イベントフォームのコントローラーを作成しました。ユーザーがフォームを正常に送信し、すべてが検証されたら、ユーザーは地図をクリックしてピンをドロップできます。ユーザーがピンをクリックすると、フォームにあったようにイベントの情報が表示されます。現在、ドロップピンとピン情報関数はすべて、コントローラーから分離されたGoogleのAPIによって処理されます。ただし、関数は新しいイベントのデータにアクセスする必要があります。つまり、コントローラーのスコープへのアクセスを関数に与える必要があります。

スコープへのアクセスを提供することはできますが、外部機能へのアクセスを許可することは正しいことではないと内臓が教えてくれます。では、これを設計するためのより良い方法は何ですか？または、スコープへのアクセスを許可することが完全に合法であると間違っている可能性があります。そうであれば、誰かが根本的な理由についての洞察を私に提供できますか？

4

1 に答える 1

1

同じトピックに興味のある人は、いくつかの調査の結果、正しい解決策を見つけたと思います。答えは、コントローラーの外部でスコープアクセスを提供することではなく（これは悪いことだと思います）、共通データを保持するサービスを作成することです。データへのアクセスが必要なコントローラーは、このサービスを要求してアクセスできます。

したがって、私の特定のケースでは、GoogleのAPIを使用してマップを初期化し、すべてのマップ関数を処理するGoogleマップラッパー用の別のコントローラーを作成する必要があります。次に、イベントフォームからのデータを保持するnewEventサービスを作成しました。これは、イベントコントローラーとマップコントローラーの両方に必要です。イベントコントローラーはサービスにデータを書き込み、マップコントローラーは適切なタイミングでサービスからデータを取得します。

しかし、マップコントローラにコードが多すぎることがわかりました。多くのマップオプションを初期化し、マップオブジェクトのユーティリティコールバックを実装して、GoogleのAPIに登録する必要があります。したがって、私はさらに一歩進んで、これらすべての機能をさらに別のサービスに組み込みました。代わりに、マップコントローラーはGoogleのAPIを処理するためにマップサービスを必要とし、その後、マップサービスはイベントデータを取得するためにイベントサービスを必要とします。

これで、私のアプリは次のようになります。

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

以下は、私が非常に役立つと思った2つの記事です。

問題

私の唯一の問題は、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関数を入力フィールドにバインドして自動的に更新する方法が見つかりませんでした。どんな提案でも大歓迎です。

于 2013-01-10T17:17:14.503 に答える