AngularJS多控制器间JSON数据共享方案咨询（首次提问）

嘿，很高兴你在这里发第一篇帖子！关于两个控制器共享数据的问题，这在AngularJS开发里太常见了，我给你几个实用的解决方案，其中最推荐的是官方提倡的**服务（Service/Factory）**方案，咱一个个说：

方案一：用自定义共享服务（最推荐） #

AngularJS的服务是单例模式的——也就是说整个应用里只会有一个服务实例，所有控制器注入的都是同一个对象，完美适配数据共享的场景。而且把数据获取逻辑放到服务里，还能让控制器更专注于视图相关的逻辑，代码结构更清晰。

步骤1：定义共享服务 #

先创建一个专门用来处理酒店数据的服务，负责获取、存储和提供酒店数据：

app.factory('HotelDataService', function($http) {
  // 内部存储酒店数据的变量
  var hotelStore = {
    hotels: []
  };

  // 对外暴露的方法
  return {
    // 获取远程JSON数据并存储
    fetchHotels: function() {
      return $http.get('js/hotels1.json').then(function(response) {
        hotelStore.hotels = response.data;
        return hotelStore.hotels;
      });
    },
    // 获取所有酒店数据
    getAllHotels: function() {
      return hotelStore.hotels;
    },
    // 根据ID获取单个酒店
    getHotelById: function(hotelId) {
      return hotelStore.hotels.find(function(hotel) {
        return hotel.id === hotelId;
      });
    }
  };
});

步骤2：修改第一个控制器（ListController1） #

把原来的$http请求逻辑移到服务里，控制器只需要调用服务的方法，同步数据到$scope：

app.controller('ListController1', function($scope, HotelDataService) {
  // 调用服务获取酒店数据，同步到当前scope
  HotelDataService.fetchHotels().then(function(hotels) {
    $scope.hotels = hotels;
  });
});

步骤3：修改第二个控制器（BookCtrl） #

注入同一个服务，直接通过服务获取共享的酒店数据，还能根据路由参数拿到对应的酒店：

app.controller('BookCtrl', function($scope, $state, HotelDataService) {
  $scope.Id = $state.params.Id;
  // 根据ID从共享服务里拿到对应的酒店数据
  $scope.selectedHotel = HotelDataService.getHotelById($scope.Id);
});

方案二：用$rootScope（不推荐，仅作了解） #

你也可以把数据放到全局的$rootScope里，这样所有控制器都能访问，但这种方式很容易造成全局变量污染，后期维护起来很麻烦，除非是非常简单的小项目，否则不建议用：

// 在ListController1里
app.controller('ListController1', function($scope, $http, $rootScope){ 
  $http.get('js/hotels1.json').success(function(data){ 
    $scope.hotels = data;
    // 把数据放到全局rootScope
    $rootScope.hotels = data;
  }); 
}); 

// 在BookCtrl里
app.controller('BookCtrl', function($scope, $state, $rootScope){ 
  $scope.Id = $state.params.Id;
  // 从rootScope里获取数据
  $scope.selectedHotel = $rootScope.hotels.find(function(hotel) {
    return hotel.id === $scope.Id;
  });
})

总结 #

优先选择自定义服务的方案，这是AngularJS里共享数据的最佳实践，代码更模块化，也更容易扩展和维护。

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