CODEWITHSUNDEEP
javascriptangularjs
waneksx
waneksx

Reputation: 71

How to change controller variable in service angular?

This's my service. I've got variable isPolygonDrawingEnded there.

angular
    .module('gillie.clients.app')
    .service('mapDrawingService', mapDrawingService);

mapDrawingService.$inject = ['$ngBootbox', '$translate', 'fitPolygonService', 'mapCommonService'];

function mapDrawingService($ngBootbox, $translate, fitPolygonService, mapCommonService) {
    var self = this;

    var map;
    var polygonFeatures;
    var stopDrawingAction;
    var isPolygonDrawingEnded = false;
    var isDrawingMode = true;

self.startNewPolygonDrawing = function (afterDrowed) {

        fitPolygonService.suggestPoint(isDrawingMode);
        var modify = createModifyInteractionToPolygonFeatures();

        var draw = createDrawInteraction();
        attachDrawEvents(draw, afterDrowed);
        map.addInteraction(draw);

        stopDrawingAction = function() {
            map.removeInteraction(draw);
            map.removeInteraction(modify);
        };
    };
        var attachDrawEvents = function (draw, afterDrowed) {
        draw.on('drawend', function (e) {
            e.preventDefault();
            afterDrowed();
            isPolygonDrawingEnded = true;

            if (fitPolygonService.isPolygonsExist()) {
                var geometry = e.feature.getGeometry();
                e.feature.setGeometry(fitPolygonService.fitPolygon(geometry));
            }
        });
}

This is my controller. Here I need to change $scope.showCountButton when mapDrawingService.isPolygonDrawingEnded == true. So how can I know that value in service is changed ?

angular
    .module('gillie.clients.app')
    .controller('regionController', regionController);

regionController.$inject = ['$q', '$filter', '$scope', '$ngBootbox', '$translate', 'regionService', 'mapService', 'mapDrawingService', 'modalService', 'regionCommonService', 'alertService', 'nominatimCommonService', 'populationService', 'provinceCommonService', 'provinceService', 'rx'];

function regionController($q, $filter, $scope, $ngBootbox, $translate, regionService, mapService, mapDrawingService, modalService, regionCommonService, alertService, nominatimCommonService, populationService, provinceCommonService, provinceService, rx) {

    $scope.showCountButton = false;

        $scope.startRegionSelection = function (region) {

        $scope.isSavingAvailable = true;
        $scope.showCountButton = false;
        if (currentEditingRegion && region && currentEditingRegion.Id === region.Id) {
            return;
        }

        if(region)
            mapService.clearRegion(region);

        if (currentEditingRegion && !region) {
            mapDrawingService.continuePolygonDrawing();
            return;
        }

        if (region) {
            mapDrawingService.stopPolygonDrawing();
            mapDrawingService.clearMap();

            currentEditingRegion = region;
            mapDrawingService.startExistPolygonDrawing(region.Name, region.CoordinatesJson);
            return;
        }

        mapDrawingService.startNewPolygonDrawing(function () {            
                    $scope.showCountButton = true           
        });
    };

When I use mapDrawingService.startNewPolygonDrawing function - the value of showCountButton changes but view doesn't. $scope.$apply produces this exception:

[$rootScope:inprog] $digest already in progress

Upvotes: 1

Views: 158

Answers (1)

machinehead115
machinehead115

Reputation: 1657

When you are passing the callback function it is no longer in the scope of the controller which is why the view is not updating. You can use promises instead since you are asynchronous draw event.

Service

mapDrawingService.$inject = ['$q', '$ngBootbox', '$translate', 'fitPolygonService', 'mapCommonService'];

function mapDrawingService($q, $ngBootbox, $translate, fitPolygonService, mapCommonService) {
  var self = this;

  var map;
  var polygonFeatures;
  var stopDrawingAction;
  var isPolygonDrawingEnded = false;
  var isDrawingMode = true;

  self.startNewPolygonDrawing = function() {
    fitPolygonService.suggestPoint(isDrawingMode);
    var modify = createModifyInteractionToPolygonFeatures();

    var draw = createDrawInteraction();
    var promiseObj = attachDrawEvents(draw);
    map.addInteraction(draw);

    stopDrawingAction = function() {
      map.removeInteraction(draw);
      map.removeInteraction(modify);
    };

    return promiseObj;
  };
  var attachDrawEvents = function(draw) {
    return $q(function(resolve, reject) {
      draw.on('drawend', function(e) {
        e.preventDefault();

        if (fitPolygonService.isPolygonsExist()) {
          var geometry = e.feature.getGeometry();
          e.feature.setGeometry(fitPolygonService.fitPolygon(geometry));
        }

        resolve();
      });
    });
  }

Controller

mapDrawingService.startNewPolygonDrawing().then(function() {
  $scope.showCountButton = true
});

Upvotes: 1

Related Questions