如何在服务角度中更改控制器变量?

时间:2016-11-22 14:20:52

标签: javascript angularjs

这是我的服务。我有变量isPolygonDrawingEnded那里。

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

这是我的控制器。在$scope.showCountButton时,我需要更改mapDrawingService.isPolygonDrawingEnded == true那么我怎么知道服务中的价值发生了变化?

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

当我使用mapDrawingService.startNewPolygonDrawing函数时,showCountButton的值会发生变化,但视图却没有。 $scope.$apply会产生此异常:

[$rootScope:inprog] $digest already in progress

1 个答案:

答案 0 :(得分:0)

当您传递回调函数时,它不再在控制器的范围内,这就是视图未更新的原因。您可以使用promises,因为您是异步绘制事件。

<强>服务

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

<强>控制器

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