i'm using angular.js , leaflet.js map in location has map markers popups binded them. need use span 2 different icons (one shown in code below) can click call different functions , ng-class change class if conditions met. code:
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>'); however when inspect element this:
<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> the ng-click should send function both specific object , array of objects when click icon nothing happens. in research found popup prevents event propagation (more info i'm not sure how override or fix work angular. have idea of how accomplish this?
update:
since ng-click/class evaluate string fixed variables this:
$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>'); the html comes out correctly:
<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> however when click icon nothing happens , doesn't functions being called. have clue why happen?
your issue comes fact manually creating dom, not compiled angularjs.
in cases, have manually compile , link element.
the code this:
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]); here take html string, , start transforming dom. because angularjs eats dom, not strings.
angular.element(html) then, compile dom link function, using $compile service.
linkfunction = $compile(angular.element(html)); when executed, function return jquery dom tree controlled angular, running in scope give argument. here
linkfunction(newscope) please note scope give child scope of $scope. without doing this, share same scope between popups, , not idea. creating new scope done in var declaration
newscope = $scope.$new() from can actual dom node
linkfunction(scope)[0] and pass leaflet
.bindpopup(linkfunction(newscope)[0]); and you're done!
for more info, please refer compiler doc.
edit: rectified issues regarding scope
Comments
Post a Comment