Угловое обновление после изменения $ scope

Question

В моем приложении я использую google maps api v3, чтобы отображать информацию на карте. Infowindows заполнены значениями $ scope. После загрузки карты область $ изменяется из-за события, однако содержимое моего infowindow остается неизменным.

Как это сделать?

Я уже пытаюсь вызвать $ рамки. $ Применять() в конце моего события функцию обратного вызова, но он не работает ...

Controller.js

this.fillingMethod = function(){ 
      info = MyService.getInformation(); 
      $scope.fillingInfo = info; 
} 
this.changeAnInfo = function(){ 
      var info = $scope.fillingInformation; 
      var info = MyService.changeInfo(info); 
      $scope.fillingInformation = info; 
      $scope.$apply(); 
      }//Google InfoWindow is not refreshed. 

View .html

<!-- ng-controller is defined and refers to Controller --> 
    <map id="map-canvas" center="current-location" zoom="15" ng-init="map.fillingMethod()"> 
     <marker id='test' position="current-location" animation="BOUNCE"></marker> 
      <info-window id="marker-info" class="gmarker"> 
       <div ng-non-bindable=""> 
        <div id="siteNotice"></div> 
         <h1 id="firstHeading" class="firstHeading">{{fillingInformation}}</h1> 
        </div> 
       </div> 
      </info-window> 
    </map> 
<button ng-click="changeAnInfo()" /> 

Answer 1

angular-google-maps Проверьте это. Это карты Google для углового. У вас будут настраиваемые директивы. Просто разместите свой $scope внутри, он будет обновляться автоматически, точно так же, как вы добавляете область в html tags.

Ознакомьтесь с API, используйте window директиву или windows

Edit: есть 2 странные вещи в вашем коде

• Во-первых, почему существует ng-non-bindable это предотвратит Угловая компилировать вещи внутри него. Попробуйте удалить его, может быть?
• Вы используете не очень много angular-google-maps из angular-ui. Если это так. Тогда у вас будет настраиваемая директива/attr. А для обновления просто поместите информацию внутри тега.

<map id="map-canvas" center="current-location" zoom="15" ng-init="map.fillingMethod()"> 
 
    <marker id='test' position="current-location" animation="BOUNCE"></marker> 
 
     <info-window id="marker-info" class="gmarker"> 
 
      <div > 
 
       <div id="siteNotice"></div> 
 
        <h1 id="firstHeading" class="firstHeading">{{fillingInformation[0]}}</h1> 
 
       </div> 
 
      </div> 
 
     </info-window> 
 
</map>