次のディレクティブがあります。
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
ページの読み込み時にウォッチャーが表示されることがわかりました
#///Watch for point changes///##
scope.$watch attrs.points,( (value) ->
updateMarkers value
), true
#//Watch For Shape Changes///###
scope.$watch attrs.shape,( (value) ->
updateShape value
), true
ロード時に起動しています...そして、それらがロードする関数からそれらのメッセージが表示されています。どちらの属性も変更されていないため、これはオフです。
これは私が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"]
ページの読み込み時に読み込まれる理由がわかりません。データは変更されません。ない限り - 単に作成されているだけでそれができます - 私が回避する必要があります.