AngularJS：如何在自执行函数中引用服务实现数据共享

看起来你卡在了「自执行函数（IIFE）没法接入Angular依赖注入体系」这个点上——毕竟IIFE是在Angular上下文之外运行的，直接拿服务肯定行不通。我给你几个实用的解决方案，帮你把数据存进服务，让其他控制器都能访问到：

方案1：把数据加载逻辑移到Angular的run块（最推荐） #

Angular的run块是应用启动时就执行的，它能直接注入服务，完美适配你的需求。

第一步：确保你的共享服务定义正确 #

先确认你的数据服务是个能存、能取的单例服务（Angular的service默认就是单例，天生适合共享数据）：

var app = angular.module('myApp', []);

// 定义共享数据服务
app.service('DataShareService', function() {
  var _sharedData = {};

  return {
    // 存数据的方法
    setData: function(data) {
      _sharedData = data;
    },
    // 取数据的方法
    getData: function() {
      return _sharedData;
    }
  };
});

第二步：用run块加载并存储数据 #

把原来IIFE里的数据加载逻辑移到run块里，这样就能直接注入DataShareService，把数据存进去：

// 应用启动时执行的run块
app.run(['DataShareService', '$http', '$rootScope', function(DataShareService, $http, $rootScope) {
  // 用Angular的$http请求数据（也可以用fetch，但$http会自动触发Angular的脏检查）
  $http.get('/your-api-endpoint')
    .then(function(response) {
      var loadedData = response.data;
      // 把数据存到共享服务里
      DataShareService.setData(loadedData);
      // 广播事件，告诉所有控制器数据已经加载完成
      $rootScope.$broadcast('dataLoaded');
    })
    .catch(function(error) {
      console.error('数据加载失败:', error);
    });
}]);

第三步：控制器里获取共享数据 #

现在任何控制器都能注入DataShareService拿到数据了，还可以监听dataLoaded事件确保数据已就绪：

// 第一个控制器
app.controller('FirstController', ['$scope', 'DataShareService', function($scope, DataShareService) {
  // 直接获取数据（如果run块已经执行完的话）
  $scope.pageData = DataShareService.getData();

  // 或者监听事件，确保数据加载完成后再更新视图
  $scope.$on('dataLoaded', function() {
    $scope.pageData = DataShareService.getData();
  });
}]);

// 第二个控制器同理
app.controller('SecondController', ['$scope', 'DataShareService', function($scope, DataShareService) {
  $scope.pageData = DataShareService.getData();
}]);

方案2：如果必须保留IIFE，手动获取Angular注入器（不推荐） #

要是你不想改动原来的IIFE结构，也可以手动从Angular的上下文里拿到服务，但这个方法依赖DOM，容易出问题，仅作备选：

(function() {
  // 原来的异步数据请求
  fetch('/your-api-endpoint')
    .then(res => res.json())
    .then(data => {
      // 获取Angular的注入器（前提是Angular已经初始化，且页面有ng-app元素）
      var injector = angular.element(document.body).injector();
      // 拿到数据服务
      var dataService = injector.get('DataShareService');
      dataService.setData(data);

      // 手动触发Angular的脏检查，因为fetch不在Angular的 digest cycle里
      var $rootScope = injector.get('$rootScope');
      $rootScope.$apply(function() {
        $rootScope.$broadcast('dataLoaded');
      });
    });
})();

额外优化：实现「数据加载完再加载页面」 #

如果你的需求是页面完全等数据加载好再渲染，可以结合路由的resolve配置（假设用ngRoute或ui-router），这样路由会等待数据加载完成后，才渲染对应的控制器和视图：

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/your-page', {
      templateUrl: 'your-page.html',
      controller: 'FirstController',
      // resolve里的代码会在路由跳转前执行，数据加载完才进入页面
      resolve: {
        loadedData: ['DataShareService', '$http', function(DataShareService, $http) {
          return $http.get('/your-api-endpoint')
            .then(function(response) {
              var data = response.data;
              DataShareService.setData(data);
              return data; // 可以直接注入到控制器里
            });
        }]
      }
    });
}]);

// 控制器里直接注入resolve好的数据
app.controller('FirstController', ['$scope', 'loadedData', function($scope, loadedData) {
  $scope.pageData = loadedData;
}]);

这样就能完美实现「数据优先加载，再渲染页面+共享数据给多控制器」的需求啦！

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