17

Angular.JS と Leaflet.JS を、ポップアップがバインドされたマップ マーカーを持つ自分の場所のマップに使用しています。クリックしてさまざまな関数を呼び出すことができる 2 つの異なるアイコン (以下のコードに示すアイコン) と、特定の条件が満たされた場合にクラスを変更する ng-class を含むスパンを使用する必要があります。これは私のコードです:

var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup('<br><span ng-class="thumbsUpClass(' + hotelsSelectedDates[i]['hotels'][s] + ')" ng-click="addChoice(' + hotelsSelectedDates[i]['hotels'][s] + ',' + hotels + ')"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>');

ただし、要素を調べると、次のようになります。

<span ng-class="thumbsUpClass([object Object])" ng-click="addChoice([object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object])"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>

ng-click は、特定のオブジェクトとオブジェクトの配列の両方をその関数に送信する必要がありますが、アイコンをクリックしても何も起こりません。私の調査では、ポップアップがイベントの伝播を妨げていることがわかりました（詳細ですが、それをオーバーライドする方法や、angularで動作させるための修正方法がわかりません。これを達成する方法について誰か考えがありますか?

アップデート：

ng-click/class は文字列を評価するので、変数を次のように修正しました。

$scope.item = hotelsSelectedDates[i]['hotels'][s]
$scope.set = hotels
var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup('<br><span ng-class="thumbsUpClass(item)" ng-click="addChoice(item,set)"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>');

html は正しく出力されます。

<span ng-class="thumbsUpClass(item)" ng-click="addChoice(item,set)"><span class="popup-container"><span class="icon-stack thumbs-up-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>

ただし、アイコンをクリックしても何も起こらず、関数が呼び出されているようには見えません。なぜこれが起こるのか誰にも手がかりがありますか？

4

6 に答える 6

28

あなたの問題は、AngularJS によってコンパイルされていない DOM を手動で作成しているという事実に起因しています。

そのような場合、要素を手動でコンパイルしてリンクする必要があります。

コードは次のようになります。

var html = '<br><span ng-class="thumbsUpClass(item)" ' +
    'ng-click="addChoice(item,set)"><span class="popup-container"><span ' +
    'class="icon-stack thumbs-up-stack"><i class="icon-sign-blank ' +
    'icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>',
    linkFunction = $compile(angular.element(html)),
    newScope = $scope.$new();

newScope.item = hotelsSelectedDates[i]['hotels'][s]
newScope.set = hotels
var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup(linkFunction(newScope)[0]);

ここでは、HTML 文字列を取得し、まずそれを DOM に変換します。AngularJS は文字列ではなく DOM を使用するためです。

angular.element(html)

次に、$compile サービスを使用して、この DOM をリンク関数にコンパイルします。

linkFunction = $compile(angular.element(html));

実行すると、この関数は Angular によって完全に制御され、引数として指定したスコープで実行される jQuery DOM ツリーを返します。これが私がここでやっていることです

linkFunction(newScope)

私が与えるスコープは $scope の子スコープであることに注意してください。これを行わないと、すべてのポップアップで同じスコープを共有することになり、これは良い考えではありません。新しいスコープの作成は var 宣言で行われました

newScope = $scope.$new()

そこから実際のDOMノードを取得できます

linkFunction(scope)[0]

そしてリーフレットに渡す

.bindPopup(linkFunction(newScope)[0]);

そして、あなたは完了です！

詳細については、コンパイラのドキュメントを参照してください。

編集：スコープに関する問題を修正

于 2013-12-05T13:30:21.137 に答える
10

angular-leaflet-directive で Angular コンテンツの新しいサポートを使用できます。

var html = '<br><span ng-class="thumbsUpClass(item)" ' +
    'ng-click="addChoice(item,set)"><span class="popup-container"><span ' +
    'class="icon-stack thumbs-up-stack"><i class="icon-sign-blank ' +
    'icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>';

... 

$scope.markers.push( { lat: ...,
                       lng: ...,
                       message: html,
                       getMessageScope: function() { return $scope; },          
});
于 2015-01-14T02:54:08.747 に答える
1

mapbox-gl-js と angular のこの回答ヘルプが見つかりました:

var html = '<button ng-click="fn()">Click Me</button>';
var compiledHtml = $compile(html)($scope);
var popup = new mapboxgl.Popup()
 .setLngLat([-91.874, 42.760])
 .setDOMContent(compiledHtml[0])
 .addTo(map);

ポップアップ (mapbox) で ng-click を有効にする

于 2017-04-28T19:01:44.290 に答える
0

トピックに少し遅れましたが、同様の状況があり、解決策を共有したかった.

ポップアップに追加したい html があるとします。単純に 'id' を追加します。

var html = '<a id="popup" href="" ng-model="featureSelected" ng-click="cherryPickPin(featureSelected)">cherry pick this pin</a>';

今あなたがする必要があるのはこれだけです：

var popupElement = $('#popup'); // grab the element (make sure that it exists in the DOM)
popupElement = $compile(popupElement)($scope); // let angular know about it
于 2015-06-12T16:16:18.377 に答える