2013-02-21 3 views
2

Я имею следующую директиву:

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 

стреляет по нагрузке ... и я вижу эти сообщения от функций, которые они загружают. Это отключено, потому что ни один из attrs не изменился.

Это, как я загружаю Угловая:

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"] 

Я не могу понять, почему он загружает на странице загрузки. Данные не изменяются. Если только это не будет создано, это сделает то, что мне нужно обойти.

ответ

8

После того, как наблюдатель зарегистрирован в области видимости, слушатель fn вызывается асинхронно (через $ evalAsync) для инициализации наблюдателя. В редких случаях это нежелательно, потому что слушатель вызывается, когда результат watchExpression не изменяется. Чтобы обнаружить этот сценарий в слушателе fn, вы можете сравнить newVal и oldVal. Если эти два значения идентичны (===), то слушатель вызывается из-за инициализации. - Scope#$watch

5

Я упростил мои $ заявления смотреть на:

scope.$watch('someVar', function(newVal) { 
    if (newVal) { 
    // now, it's time to do something with scope.someVar 
    } 
}); 
+1

Я обычно использую этот один, тоже. Однако я обнаружил, что это может вызвать проблемы в таких вещах, как поиск/фильтры, если пользователь удаляет все (предположительно, чтобы удалить фильтрацию). В этом случае, поскольку 'someVar' теперь будет пустой строкой и« falsey », никаких действий не будет. Не всегда проблема, но что-то отметить. – squid314

+0

Хорошая точка! Спасибо. Для фильтрации я также смотрю на oldVal. –