javascript - 如何更改服务 Angular 中的 Controller 变量？

Question

这是我的服务。我在那里有变量 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));
            }
        });
}

这是我的 Controller 。这里，当mapDrawingService.isPolygonDrawingEnded == true时，我需要更改$scope.showCountButton。 那么我怎么知道服务值(value)发生了变化？

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的值发生变化，但 View 没有变化。 $scope.$apply 产生此异常:

[$rootScope:inprog] $digest already in progress

Answer 1

当您传递回调函数时，它不再位于 Controller 的范围内，这就是 View 不更新的原因。您可以使用 Promise 来代替，因为您是异步绘制事件。

服务

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