Can't change clickable property with function call

[JoergPf]

Hi, I have a strange problem:

I would like to change the clickable marker property by clicking a link outside the map, but it doesn't work.
It works with the icon property, but not with clickable.

Check out this fiddle: http://jsfiddle.net/Ls59qLLa/2/

JS:
var app = angular.module('demoapp',['leaflet-directive']);

app.controller('DemoController', [ '$scope', 'leafletData', function($scope, leafletData) {

var local_icons = {
        defaultIcon: {},
        gmapicon: {
            iconUrl: 'http://maps.google.com/mapfiles/kml/shapes/capital_big.png',
            iconSize:     [25, 25],
            iconAnchor:   [12, 12], 
            popupAnchor:  [0, 0] 
        }
    }


angular.extend($scope, {
  markers: {
            m1: {
                lat: 41.85,
                lng: -87.65,
                clickable: false,
                message: "I'm a static marker",
                icon: local_icons.gmapicon
            }
        }
});

$scope.makeIconClickable = function(){
   var whichmarker = 'm1';
   $scope.markers[whichmarker].clickable = true;
}


}]);

[nmccready]

You need to turn on watchMarkers attribute so it watches the individually.

[nmccready]

https://github.com/tombatossals/angular-leaflet-directive/blob/master/src/directives/markers.js#L159

[nmccready]

Or use markers-watch-options (master only).

[nmccready]

https://github.com/tombatossals/angular-leaflet-directive/blob/master/src/services/leafletMarkersHelpers.js#L253-L257

The code does not lie.

[nmccready]

nvm I tried it on the example it is not helping with click. I also tried copying the markers as a new ref and that did no good either. Anyways the code your looking for to fix is somewhere near the code I gave you already.

[nmccready]

I figured out the bug. However here is your workaround.

http://jsfiddle.net/nmccready/gbd1aydL/

Also your pointing to old code for angular-leaflet. Use
http://cdn.rawgit.com/tombatossals/angular-leaflet-directive/master/dist/angular-leaflet-directive.js

[nmccready]

here as it only deletes a marker if it was erased. I needs to check to see if the original set of markers is different as well and erase them all .

[JoergPf]

Great! Thanks! This helped me a lot!!!!

[nmccready]

How I plan to resolve it.

  var _destroy = function(markerModels, oldMarkerModels, lMarkers, map, layers){
        // Delete markers from the array
        var hasLogged = false,
          modelIsDiff = false;
        var doCheckOldModel =  isDefined(oldMarkerModels);
        for (var name in lMarkers) {
            if(!hasLogged) {
                $log.debug(errorHeader + "[markers] destroy: ");
                hasLogged = true;
            }

            if(doCheckOldModel){
              //might want to make the option (in watch options) to disable deep checking
              //ie the options to only check !== (reference check) instead of angular.equals (slow)
              modelIsDiff = !angular.equals(markerModels[name],oldMarkerModels[name]);
            }
            if (!isDefined(markerModels) ||
                !Object.keys(markerModels).length ||
                !isDefined(markerModels[name]) ||
                !Object.keys(markerModels[name]).length ||
                modelIsDiff) {
                deleteMarker(lMarkers[name], map, layers);
                delete lMarkers[name];
            }
        }
    };

[nmccready]

#678

[nmccready]

See here: http://jsfiddle.net/nmccready/gbd1aydL/