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