angularjs とリーフレットを一緒に使用して問題を回避しようとしています。しかし、この一般的な質問はしばらくの間私を悩ませてきたので、回避策は「角度の観点からこれを正しい方法で行っているのでしょうか?」への良い手がかりです。
問題：
リーフレット マップを使用しています。そのポップアップを使用して、マップ上のポイントに関する追加データを表示したいと考えています。地図上にたくさんのポイントを表示するつもりです。たくさんとは？サーバーにポイントを照会するときは、ID (後でより多くのデータを照会するために使用) とジオメトリ (ポイントをプロットできるようにするため) のみを取得するだけで十分です。ポイントの「クリック」で、サーバーにアクセスして、その特定のポイントに関連付けられているすべてのデータを取得し、ポップアップに表示したいと考えています。
リーフレットに関連する DOM 内のすべてのものを制御する角度ディレクティブ (リーフレット ディレクティブ) があります。そのディレクティブは、ポイントの「クリック」などをリッスンするものです。これが発生すると、ディレクティブはコントローラーに戻り、そのコントローラーはサーバーにポイントに関するデータを要求し、HTML テンプレートがデータを「入力」できるようにスコープ変数を入力します。
ここでいくつか質問があります。2.ハックのように感じるものの「コンパイルされたばかり」の要素の場合、スコープを取得する必要があるため、ディレクティブへの呼び出しはハックのように見えます。
angular.element(e).scope().getContent();
問題に。ポップアップがレンダリングされた直後に HTML が更新されたことをリーフレットが認識していません。ポップアップの幅がテキストに収まらないため、幅の問題が発生します。ここにプランクがあります：
http://plnkr.co/edit/53bebb?p=preview
これを解決するためにいくつかのことを試みましたが、役に立ちませんでした。私が思いつくことができる最善のことは、次のようなことをすることです:
var newScope = $scope.$new();
var e = $compile('<div popup></div>')(newScope);
// don't bind yet, size problem
//marker.bindPopup(e[0]);
// listen for the click, then get data from server to fill in template
marker.on('click', function() {
angular.element(e).scope().getContent();
});
newScope.$watch("content", function(content) {
if (!content) return;
// now bind and open the popup as we should already have the content
marker.bindPopup(e[0]).openPopup();
}
ただし、newScope は実際には「getContent()」関数を持つコントローラーのスコープではないため、これはうまくいきませんでした。
最後に、これが機能したとしても、サーバーが遅く、データを返すのに 3 秒かかるとだけ言っておきましょう。つまり、クリック後 3 秒間ポップアップを表示することさえできず、これはユーザー エクスペリエンスとしては最悪です。
私に残された唯一のことは、チラシのポップアップを自分でサイズ変更しようとすることです。どこから始めればよいのか、それが良い考えなのかさえわかりません。
すべてのヘルプと批判 (サイズ変更の問題と角度の使用を含む) は歓迎され、高く評価されます。
前もって感謝します。