Angular模块内$scope作用域疑问：模块A定义的变量在模块B中是否可用？

嘿，这个问题问到了AngularJS里$scope作用域的关键特性，我来给你掰扯清楚：

结论先行：默认情况下，模块A里的$scope.myVariable在模块B里是未定义的

为什么会这样？ #

AngularJS里的$scope并不是和模块绑定的，而是和具体的组件（比如控制器、指令、组件）绑定的——每个组件（除非特意配置共享作用域）都会生成自己独立的$scope实例。模块本质上只是用来组织代码、依赖管理的容器，它不会决定$scope的共享范围。

举个直白的例子，假设你的两个模块里各有一个控制器：

// 模块A的控制器
angular.module('moduleA', [])
.controller('ControllerA', ['$scope', function($scope) {
  $scope.myVariable = 5; // 这个变量只属于ControllerA的$scope
}]);

// 模块B的控制器
angular.module('moduleB', [])
.controller('ControllerB', ['$scope', function($scope) {
  console.log($scope.myVariable); // 输出undefined，因为两个$scope完全独立
}]);

那什么时候能在模块B访问到这个变量？ #

只有当两个模块里的组件存在作用域继承关系时，子作用域才能访问父作用域的变量。比如：

• 模块A的控制器是父级控制器（挂载在某个DOM元素上）
• 模块B的控制器是子级控制器（挂载在父控制器DOM的子元素上）
  这种情况下，子控制器的$scope会继承父控制器的$scope，就能拿到myVariable。但这和模块本身无关，纯粹是DOM层级带来的作用域继承。

跨模块共享数据的正确姿势 #

如果想让数据在不同模块的组件间共享，别用$scope，推荐用单例服务（Service），因为服务在AngularJS里是全局单例的，任何注入它的组件都能访问同一个实例的数据：

// 先定义一个共享服务模块
angular.module('sharedDataModule', [])
.service('SharedDataService', function() {
  this.myVariable = null; // 初始化共享变量
});

// 模块A依赖共享服务模块
angular.module('moduleA', ['sharedDataModule'])
.controller('ControllerA', ['SharedDataService', function(SharedDataService) {
  SharedDataService.myVariable = 5; // 给服务的变量赋值
}]);

// 模块B同样依赖共享服务模块
angular.module('moduleB', ['sharedDataModule'])
.controller('ControllerB', ['SharedDataService', function(SharedDataService) {
  console.log(SharedDataService.myVariable); // 输出5，完美共享！
}]);

当然你也可以用$rootScope来实现全局共享，但非常不推荐——它就像全局变量一样，容易引发命名冲突、难以追踪数据变更，维护起来头疼。

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