角度指令がGoogleマップの値を更新していません

Question

Googleマップを追加するために使用する「myMap」という名前のディレクティブがあります。 コントローラの機能を使用して別の場所を再び更新しようとしていますが、value.sameマップが表示されていません。その後

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コードは同じです。問題が解決されたらうれしいです。