How to change controller variable in service angular?

Question

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

Have a look at this

asdf_enel_hak
– asdf_enel_hak

2016-11-22 14:32:34 +00:00
Commented Nov 22, 2016 at 14:32 — asdf_enel_hak
– asdf_enel_hak, Commented Nov 22, 2016 at 14:32

machinehead115 · Accepted Answer · 2016-11-22 15:38:54Z

1

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

edited Nov 22, 2016 at 15:38

answered Nov 22, 2016 at 14:34

machinehead115

1,65710 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

waneksx Over a year ago

angular.js:13550 TypeError: Cannot read property 'then' of undefined at Scope.$scope.startRegionSelection (gillie.clients.region.controller.js:76) at fn (eval at compile (angular.js:14432), <anonymous>:4:297) at expensiveCheckFn (angular.js:15485) at callback (angular.js:25018) at Scope.$eval (angular.js:17229) at Scope.$apply (angular.js:17329) at HTMLButtonElement.<anonymous> (angular.js:25023) at HTMLButtonElement.dispatch (jquery.js:4737) at HTMLButtonElement.elemData.handle (jquery.js:4549) i`ve this exceptin in browser

machinehead115 Over a year ago

Sorry, it should just be return promiseObj; not return promiseObj.promise;. I fixed it in the example above.

waneksx Over a year ago

it`s realy good solution. thank you. Now i need to resolve another problem. Earlier i can't draw second polygon. Screenshots

Collectives™ on Stack Overflow

How to change controller variable in service angular?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related