waneksx waneksx - 15 days ago 5
AngularJS Question

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

Answer

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
});