AngularJS跨控制器访问$scope.draft.groups对象的方案问询

在AngularJS中，控制器之间共享数据最规范且可维护的方式是通过共享服务（Service/Factory）——因为服务是单例的，能在整个应用中保持数据一致性。结合你现有代码的结构，我给出以下可行方案：

方案一：优化现有共享服务（推荐） #

你的项目已经定义了sharedService，但目前它只返回请求Promise，没有存储数据。我们可以扩展它来保存groups数据，并提供获取/更新数据的方法：

修改后的services.js #

angular
.module('sampleApp.services', [])
.factory('sharedService', function ($http, $q) {
  // 存储共享的groups数据
  let sharedGroups = null;

  // 获取groups数据的方法：如果已存在直接返回，否则发起请求
  const getGroups = function () {
    if (sharedGroups) {
      // 已有数据，直接返回已解析的Promise
      return $q.resolve(sharedGroups);
    } else {
      // 发起请求，并存下数据
      return $http({ method: 'GET', url: '/api/getnewgroup' })
        .then(function (response) {
          sharedGroups = response.data;
          return sharedGroups;
        })
        .catch(function (error) {
          console.log('获取groups失败:', error);
          return $q.reject(error);
        });
    }
  };

  // 提供更新groups数据的方法（如果需要手动更新）
  const updateGroups = function (newGroups) {
    sharedGroups = newGroups;
  };

  return {
    getGroups: getGroups,
    updateGroups: updateGroups
  };
});

修改addressbookCtrl #

现在我们可以直接从服务获取数据，并存入$scope.draft.groups：

angular
.module('sampleApp.controllers', [])
.controller('addressbookCtrl', function ($http, $scope, $rootScope, $location, $state, toastr, $timeout, $window, sharedService) {
 // 获取groups数据
 sharedService.getGroups().then(function (groups) {
    $scope.groups = groups;
    $scope.draft.groups = groups;
 }, function (error) {
    console.log('error');
 });
})

修改profsmsCtrl #

从共享服务获取groups数据，这样就能拿到addressbookCtrl中更新的数据了：

.controller('profsmsCtrl', function ($http, $scope, $rootScope, $location, $state, toastr, $timeout, $window, sharedService) {
 /* for drafts */
 $scope.draft = {
    draftType: '',
    scheduledTime: '',
    senderdata: '',
    draftData: { contacts: '' },
    groups: { select: false },
    senderName: '',
    message: '',
    draftName: '',
    createdOn: '',
    updatedOn: ''
 };

 // 从共享服务获取groups数据
 sharedService.getGroups().then(function (groups) {
    // 将共享的groups赋值到当前控制器的draft中
    $scope.draft.groups = groups;
 });

 //add draft
 $scope.addmanualInputDraft = function () {
    $http.post('/api/addmanualinputdraft', $scope.draft).then(function (response) {
        toastr.success("Added successfully!");
        $('.bd-example-modal-lg-manual').modal('hide');
        $state.reload();
    });
 }
})

方案二：使用$rootScope（不推荐，仅作补充） #

如果只是临时快速实现，可以用$rootScope来共享数据，但这种方式会污染全局作用域，不利于长期维护：

在addressbookCtrl中设置$rootScope #

sharedService.getDraftPromise().then(function (response) {
    $scope.groups = response.data;
    $scope.draft.groups = response.data;
    // 存入rootScope
    $rootScope.sharedGroups = response.data;
 }, function (response) {
    console.log('error');
 });

在profsmsCtrl中获取 #

// 直接从rootScope获取
$scope.draft.groups = $rootScope.sharedGroups;
// 可以监听变化（如果数据是异步加载的）
$scope.$watch(function() { return $rootScope.sharedGroups; }, function(newVal) {
  if(newVal) {
    $scope.draft.groups = newVal;
  }
});

为什么推荐方案一？ #

• 服务是AngularJS中专门用于共享数据和业务逻辑的组件，符合模块化设计原则
• 数据集中管理，便于后续扩展和维护
• 避免全局作用域污染，代码结构更清晰

内容的提问来源于stack exchange，提问作者Sameer