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 // 深度監聽
);