I have the following directive:
leafletDirective = angular.module("leaflet-directive", [])
leafletDirective.directive "leaflet", ($http, $log) ->
restrict: "E"
replace: true
transclude: true
template: "<div id=\"map\"></div>"
scope:
origin: "=origin"
points: "=points"
shape: "=shape"
clearmarkers: "=clearmarkers"
markers: "=markers"
link: (scope, element, attrs, ctrl) ->
scope.origin = [40.094882122321145, -3.8232421874999996]
scope.points = []
scope.shape = []
#create a CloudMade tile layer and add it to the map
@map = L.map(attrs.id,
center: scope.origin
zoom: 5
)
L.tileLayer("http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png",
maxZoom: 18
).addTo @map
#add markers dynamically
updateMarkers = (pts) =>
console.log "loading markers"
scope.markers = []
for p of pts
lat = pts[p].lat
lng = pts[p].lng
latLng = new L.LatLng(lat,lng)
marker = new L.marker(latLng).addTo(@map)
scope.markers.push(marker)
return scope.markers
#/// Add Polygon
updateShape = (points) ->
console.log "loading shape"
#///Watch for point changes///##
scope.$watch attrs.points,( (value) ->
updateMarkers value
), true
#//Watch For Shape Changes///###
scope.$watch attrs.shape,( (value) ->
updateShape value
), true
I am finding that on page load my watchers
#///Watch for point changes///##
scope.$watch attrs.points,( (value) ->
updateMarkers value
), true
#//Watch For Shape Changes///###
scope.$watch attrs.shape,( (value) ->
updateShape value
), true
Are firing on load... and I am seeing those messages from the functions they load. This is off because neither of the attrs have changed.
This is how I load Angular:
app = angular.module("WhereToMeet", ["leaflet-directive"])
@MapCtrl = ($scope) ->
$scope.clicked = ->
$scope.points.push(
{lat: 1, lng: 2}, {lat: 40.094882122321145, lng: -3.8232421874999996}
)
$scope.clear = ->
$scope.clearmarkers($scope.markers)
$scope.makeShape = ->
$scope.shape = []
$scope.shape = ["1"]
I cant figure out why it loads on page load. The data does not change. Unless - it simply being created will do that - which I need to get around.
After a watcher is registered with the scope, the listener fn is called asynchronously (via $evalAsync) to initialize the watcher. In rare cases, this is undesirable because the listener is called when the result of watchExpression didn't change. To detect this scenario within the listener fn, you can compare the newVal and oldVal. If these two values are identical (===) then the listener was called due to initialization. -- Scope#$watch
I have simplified my $watch statements to:
scope.$watch('someVar', function(newVal) {
if (newVal) {
// now, it's time to do something with scope.someVar
}
});