Search code examples
angularjsleafletangular-leaflet-directive

angular watch for angular-leaflet-directive


I am trying to place $watch on a value in angular to setup controls differently depending on instructions from the controller and I have tried to follow the lead in angular-leaflet-directive using leafletScope.$watch("variable").

I have added a new $watch with equality comparison as it's an object:

leafletScope.$watch("controls", function(controlOpts) {...}, true)

I then call it in the controller using:

angular.extend($scope, {
    controls: {}
}

This is to initialise the controls as this seems to be required.

I then call it later on an event using:

$scope.controls = { new object }

If I log the change in controls and then also on the $watch event, I get the following sequence:

  • control $watch event logged
  • $scope.control change event logged
  • no further logs

The fact that the watch isn't called after the $scope is changed suggests I am doing this wrong.

Can anyone advise me where, or if I have reached the wrong conclusion in my simple test.

If I do the same and change my "center" model, I get:

  • center$watch event logged
  • $scope.center change event logged
  • center$watch event logged with new value

Solution

  • This turned out to be a clash between angular-leaflet-directive and the html minifier I was using html-minifier. The angular-leaflet-directive notation for leaflet controls is controls so in my html file I had

    <leaflet center="centre" controls="controls" layers="layers" width="1200px" height="800px"></leaflet>
    

    the html-minifier took controls="controls" to be a boolean attribute and with the collapse boolean attributes flag on reduced it to

    <leaflet center="centre" controls layers="layers" width="1200px" height="800px"></leaflet>
    

    Which wasn't good. I will request this is either better documented in angular-leaflet-directive or they change the name of controls to leaflet-controls or something to avoid this happening to unsuspecting folk like me in the future.

    Incidently the true flag on the watch proved to be too resource intensive and I removed it and it still worked..