Angular服务实现控制器间数据共享：手动引导失效问题

咱们得先搞清楚Angular里Service单例的核心逻辑：Service的单例特性是针对同一个Angular应用实例（由angular.bootstrap创建）而言的。自动引导时，整个页面只会生成一个应用实例，所有控制器共享同一个Service实例，数据同步自然没问题。但手动引导多个HTML区域时，每调用一次angular.bootstrap就会创建一个全新的应用实例——每个实例都有独立的注入器和Service副本，这就是控制器间数据没法共享的根源。

你可能踩的坑（错误场景） #

如果你的手动引导代码是类似这样的，那肯定会出问题：

// 分别引导两个独立区域
angular.bootstrap(document.getElementById('div1'), ['myApp']);
angular.bootstrap(document.getElementById('div2'), ['myApp']);

这种情况下，div1和div2属于两个完全独立的Angular应用，它们的Service是各自独立的，数据自然无法同步。

正确的解决思路：只保留一个应用实例 #

要实现数据共享，必须保证整个页面只有一个Angular应用实例，所有需要绑定控制器的区域都纳入这个实例的管辖范围，具体有两种常用方案：

方案1：引导父容器，内部用ng-controller绑定控制器 #

把需要的区域都放在一个父容器里，只对这个父容器做一次手动引导，内部通过ng-controller分配不同的控制器：

<div id="app-root">
  <div ng-controller="FirstController">
    <!-- 第一个控制器的内容 -->
    <input type="text" ng-model="sharedData.value">
  </div>
  <div ng-controller="SecondController">
    <!-- 第二个控制器的内容 -->
    <p>共享的数据：{{sharedData.value}}</p>
  </div>
</div>

// 仅引导一次父容器
angular.bootstrap(document.getElementById('app-root'), ['myApp']);

方案2：动态编译新增DOM（适用于动态加载的场景） #

如果需要动态添加HTML区域（不是初始就存在于DOM中），可以借助已有的应用实例的$compile服务来编译新DOM，确保新区域继承应用的注入器，共享同一个Service：

// 先引导主应用
var appRoot = document.getElementById('app-root');
var appInstance = angular.bootstrap(appRoot, ['myApp']);
var injector = appInstance.injector();

// 动态创建新DOM
var newSection = document.createElement('div');
newSection.innerHTML = '<div ng-controller="ThirdController">{{sharedData.value}}</div>';
document.body.appendChild(newSection);

// 用应用的注入器获取$compile和$rootScope，编译新元素
injector.invoke(function($compile, $rootScope) {
  $compile(newSection)($rootScope);
  $rootScope.$digest();
});

补充：确保Service是标准单例实现 #

最后再确认下你的Service写法是正确的单例模式，比如用factory：

angular.module('myApp', [])
.factory('SharedData', function() {
  var sharedData = { value: '' };
  return {
    get: function() { return sharedData; },
    update: function(val) { sharedData.value = val; }
  };
});

只要是同一个应用实例下的控制器，注入的都是这个Service的同一个实例，数据就能正常同步了。

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