Как добавить пользовательские элементы управления масштабированием на карту, созданную с помощью angular-google-maps

Question

В настоящее время я использую angular-google-maps и создал рабочую карту с несколькими маркерами из бэкэнда. Что я хочу сделать, это добавить пользовательские элементы управления масштабированием на карту. Следовательно, я сделал это. Но это не работает, как ожидалось. Если кто-то работал над этим раньше или знает как, то не могли бы вы мне помочь?

Это мой директив-вид:

 %ui-gmap-google-map(center='map.center' pan='map.pan' options='map.options' draggable='true' zoom='map.zoom')
  %ui-gmap-marker(ng-repeat='marker in map.markers' idKey="marker.id" coords='marker.coords' location='marker.location' icon="marker.icon" click="marker.click")
     %ui-gmap-window(show="marker.showWindow" isIconVisibleOnClick="marker.isIconVisibleOnClick" options="map.infoWindowCustomClass.options")
        .tooltip-container
          %p.paragraph-one {{marker.appName}}
          %ul
            %li {{marker.city}}, {{marker.country}}
            %li Users: {{marker.userName}}
.mapzoomControls
   %i.fa.fa-minus-square.zoom-icons(ng-click='increaseMapZoom()')
   %i.fa.fa-plus-square.zoom-icons(ng-click='decreaseMapZoom()')

Вот моя директива:

'use strict'

 angular.module('protoV3App')
 .directive('dashboardMap',[ 'mapSettings',(mapSettings) ->
  templateUrl: 'views/dashboardmap.html'
  restrict: 'E'
  link: (scope, element, attrs) ->
    scope.increaseMapZoom = ()->
        mapSettings.increaseMapZoom()
        scope.$apply()
    scope.decreaseMapZoom = ()->
        mapSettings.decreaseMapZoom()
        scope.$apply()


   ])

Соответствующие функции в сервисе:

increaseMapZoom: ()-> 
    currentMap.zoom =currentMap.zoom+1;
    currentMap;
decreaseMapZoom: ()-> 
    currentMap.zoom =currentMap.zoom-1;
    currentMap;

Итак, ошибка, которую я получаю, заключается в том, что применение уже выполняется, и измененный объект карты не отражается в области видимости.:(

Answer 1

Причина, по которой вы получаете эту ошибку, потому что вы вызываете $apply внутри существующего цикла переваривания.

Чтобы избавиться от этой проблемы, добавьте следующие строки в ваш код:

if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
    $scope.$apply();
}