AngularJS全局变量监听的常见痛点

在大型AngularJS应用开发中，全局状态管理是个关键挑战。开发者常直接挂载全局变量到window对象，导致：

• 作用域无法自动检测变化
• 手动触发$apply()引发性能问题
• 多控制器同步困难
• 内存泄漏风险增加

下面通过对比方案揭示正确实践：

全局变量监听的三种方案对比

window.GLOBAL_CONFIG = { ... }

$rootScope.$watch('globalVar')

// 使用Service + 事件机制
app.service('GlobalService', function() {
  this.data = { version: '1.0' };
});
$scope.$on('global:update', callback)

正确实践四步法

1. 创建全局服务(Service)

angular.module('app').service('GlobalState', function() {
  this.settings = {
    theme: 'dark',
    apiBaseUrl: 'https://api.example.com'
  };
});

2. 在控制器注入服务

angular.module('app').controller('MainCtrl', 
  function($scope, GlobalState) {
  $scope.global = GlobalState;
});

3. 使用事件精准通信

// 发送更新事件
GlobalState.settings.theme = 'light';
$rootScope.$broadcast('global:themeChanged');

// 监听事件
$scope.$on('global:themeChanged', () => {
  // 更新局部作用域
});

4. 深度监听对象属性

$scope.$watch(
  () => GlobalState.settings,
  (newVal) => {
    // 处理变化
  },
  true // 深度监听
);