使用服务在控制器之间共享状态

Using services to share state between controllers

本文关键字：之间 共享 状态 控制器 服务      更新时间：2023-09-26

我想在我的Angular应用中的多个控制器之间通过服务共享'state'。我的代码如下。我遇到的问题是，通过vm.toggleStatus()启动状态变化的控制器已更新，但此状态在我的另一个控制器中不会更新，直到我刷新页面。

controller1.js: 

angular.module('gameApp')
  .controller('PlayerActionsController', PlayerActionsController);
PlayerActionsController.$inject = ['$routeParams', 'playersService'];
function PlayerActionsController($routeParams, playersService) {
  var vm = this;
  var playerId = $routeParams.playerId;
  var getplayerInfo = function() {
    playersService.getPlayerInfo({
      playerId: playerId
    }).$promise.then(function(player) {
      vm.player = player;
    });
  };
  var init = function() {
    getplayerInfo();
  };
  init();
  vm.toggleStatus = function() {
    playersService.toggleStatus({
      playerId: playerId
    }, {}).$promise.then(function() {
      getplayerInfo();
    });
  };
}

controller2.js: 

angular.module('gameApp')
  .controller('HeaderController', HeaderController);
HeaderController.$inject = ['$routeParams', 'playersService'];
function HeaderController($routeParams, playersService) {
  var vm = this;
  vm.playerId = $routeParams.playerId;
  var getPlayerInfo = function() {
    playersService.getPlayerInfo({
      playerId: vm.playerId
    }).$promise.then(function(player) {
      vm.player = player;
    });
  };
  var init = function() {
    getPlayerInfo();
  };
  init();
}

players.service.js: 

angular.module('gameApp')
  .factory('playersService', ['$resource',
    function($resource) {
      var base = '/api/players/:playerId/';
      return $resource(base, {}, {
        getPlayerInfo: {method: 'GET', url: base + 'playerInfo'},
        toggleStatus: {method: 'PUT', url: base + 'toggleStatus'}
      });
    }]);

服务不会向控制器推送数据，控制器需要从服务中提取数据或者监听数据的变化。

你可能想要做的是更新你的服务，当数据发生变化时发出一个事件，然后让你的控制器列出这些事件，并在发生变化时更新。例子:

//service toggleStatus
toggleStatus = function(data) {
    ... what it currently does.

    $rootScope.$emit('StatusChangedEvent', newStatus);
    ... return promise;
}
// in your controllers
$rootScope.$on('StatusChangedEvent', function(evt, newStatus) {
    $scope.status = newStatus;
});
相关文章：