Cómo usar las directivas angulares ng-click y ng-class dentro de la ventana emergente de marcadores de folletos
Estoy usando Angular.JS y Leaflet.JS para un mapa en mi ubicación que tiene marcadores de mapa con ventanas emergentes vinculadas a ellos. Necesito usar un intervalo con dos iconos diferentes (uno que se muestra en el código a continuación) en los que puede hacer clic para llamar a diferentes funciones y con ng-class para cambiar la clase si se cumplen ciertas condiciones. Este es mi código:
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>');
Sin embargo, cuando inspecciono el elemento obtengo esto:
<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>
La tecla ng-click debería enviar esa función tanto al objeto específico como a la matriz de objetos, pero cuando hago clic en el icono no pasa nada. En mi investigación encontré que la ventana emergente evita la propagación de eventos (más información pero no estoy seguro de cómo anularlo o de una solución para que funcione con angular. ¿Alguien tendría una idea de cómo lograr esto?
ACTUALIZAR:
Dado que ng-click / class evalúa una cadena, arreglé las variables para que fueran así:
$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>');
El html entonces sale correctamente:
<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>
Sin embargo, cuando hago clic en el icono, no sucede nada y no parece que se estén llamando las funciones. ¿Alguien tiene alguna idea de por qué sucedería esto?