Angular Directive没有更新谷歌地图值

Question

我有一个名为“myMap”的指令，用于添加谷歌地图。 当我尝试使用我的控制器功能再次更新经度和纬度的不同位置时，它不会更新指令值。

这里是我的指令：

directive('myMap', function() { 
    // directive link function 
    var link = function (scope, element, attrs) { 
     var map, infoWindow; 
     var markers = []; 

     // map config 
     var mapOptions = { 
      center: new google.maps.LatLng(attrs.latitude, attrs.longitude), 
      zoom: 12, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      scrollwheel: false 
     }; 

     // init the map 
     function initMap() { 
      if (map === void 0) { 
       map = new google.maps.Map(element[0], mapOptions); 
      } 
     } 

     // place a marker 
     function setMarker(map, position, title, content) { 
      var marker; 
      var markerOptions = { 
       position: position, 
       map: map, 
       title: title, 
       icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png', 
       animation: google.maps.Animation.Bounce 

      }; 

      marker = new google.maps.Marker(markerOptions); 
      markers.push(marker); // add marker to array 

      google.maps.event.addListener(marker, 'click', function() { 
       // close window if not undefined 
       if (infoWindow !== void 0) { 
        infoWindow.close(); 
       } 
       // create new window 
       var infoWindowOptions = { 
        content: content 
       }; 
       infoWindow = new google.maps.InfoWindow(infoWindowOptions); 
       infoWindow.open(map, marker); 
      }); 
     } 

     // show the map and place some markers 
     initMap(); 

     setMarker(map, new google.maps.LatLng(attrs.latitude, attrs.longitude), attrs.restname, attrs.address); 

    }; 

    return { 
     restrict: 'A', 
     template: '<div id="gmaps"></div>', 
     replace: true, 
     link: link 
    }; 
}); 

我打电话从我的HTML这个指令之后。这里是我的HTML：

<div class="gmaps" my-map="" latitude="{{home.latitude}}" longitude="{{home.longitude}}"></div> 

我坚持这一点。我使用了不同的方法，但在我的情况下不起作用。 如何检查指令参数的不同变化，以便我可以分析经度和纬度的更新值？ 请帮助我吗？

Answer 1

在您的指令中添加监视器。

attrs.$observe("value", function (data) {},true); 

它观察指令参数的变化，并在更改指令时更新它们。
你的情况这将是

lahorefoodsWebSiteModule.directive('myMap', function() { 
// directive link function 
var link = function (scope, element, attrs) { 
    attrs.$observe("latitude", function (latitude) { 
     //This gets called when data changes. 

    var map, infoWindow; 
    var markers = []; 

    // map config 
    var mapOptions = { 
     center: new google.maps.LatLng(attrs.latitude, attrs.longitude), 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     scrollwheel: false 
    }; 

    // init the map 
    function initMap() { 
     if (map === void 0) { 
      map = new google.maps.Map(element[0], mapOptions); 
     } 
    } 

    // place a marker 
    function setMarker(map, position, title, content) { 
     var marker; 
     var markerOptions = { 
      position: position, 
      map: map, 
      title: title, 
      icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png', 
      animation: google.maps.Animation.Bounce 

     }; 

     marker = new google.maps.Marker(markerOptions); 
     markers.push(marker); // add marker to array 

     google.maps.event.addListener(marker, 'click', function() { 
      // close window if not undefined 
      if (infoWindow !== void 0) { 
       infoWindow.close(); 
      } 
      // create new window 
      var infoWindowOptions = { 
       content: content 
      }; 
      infoWindow = new google.maps.InfoWindow(infoWindowOptions); 
      infoWindow.open(map, marker); 
     }); 
    } 

    // show the map and place some markers 
    initMap(); 

    setMarker(map, new google.maps.LatLng(attrs.latitude, attrs.longitude), attrs.restname, attrs.address); 
    },true); 
}; 

return { 
    restrict: 'A', 
    template: '<div id="gmaps"></div>', 
    replace: true, 
    link: link 
}; 

}）;

Html代码将是相同的。它会很好地解决您的问题。