如何在AngularJS中访问另一个JS文件中的变量？

嘿，这个需求在AngularJS开发里挺常见的，我给你整理了几种实用的方案，都是项目里验证过的：

1. 推荐：使用AngularJS服务（Service/Factory） #

这是最符合AngularJS设计理念的方式，因为服务是单例模式，可以在任何控制器、指令或其他服务中注入使用，完美解决跨文件共享数据的问题，还能保证代码的解耦和可维护性。

步骤示例： #

• 在one.js中定义一个共享服务：

angular.module('myApp')
  .factory('sharedDataService', function() {
    // 定义共享的变量
    var tagText = "SAP";
    
    // 提供获取和修改变量的方法（封装起来更安全）
    return {
      getTagText: function() {
        return tagText;
      },
      setTagText: function(newValue) {
        tagText = newValue;
      }
    };
  });

• 在two.js中注入这个服务并获取变量：

angular.module('myApp')
  .controller('TwoController', function($scope, sharedDataService) {
    // 获取one.js里定义的tagText值
    $scope.tagText = sharedDataService.getTagText();
    console.log($scope.tagText); // 输出 "SAP"
  });

2. 临时方案：使用$rootScope #

如果你只是简单的小场景，不想额外写服务，也可以用$rootScope（根作用域）——它是Angular的全局作用域，所有子作用域都能直接访问。不过不推荐在复杂项目中大量使用，因为容易造成全局污染，后续排查问题会很麻烦。

步骤示例： #

• 在one.js的运行块或控制器中给$rootScope赋值：

angular.module('myApp')
  .run(function($rootScope) {
    $rootScope.tagText = "SAP";
  });

• 在two.js的控制器中直接使用：

angular.module('myApp')
  .controller('TwoController', function($scope, $rootScope) {
    $scope.tagText = $rootScope.tagText;
    console.log($scope.tagText); // 输出 "SAP"
  });

额外注意事项 #

• 确保两个JS文件都属于同一个Angular模块（比如上面的myApp），如果是不同模块，需要在依赖列表中声明引用。
• 加载顺序：如果是直接定义全局变量（极度不推荐），要保证one.js在two.js之前加载，但用服务或$rootScope的话，只要模块初始化顺序正确就没问题。

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