Javascript 在多个angular.js应用程序之间共享单个服务

我正在建立一个电子商务网站（基于shopify），我正在使用多个小型angularjs应用程序来处理诸如快速购物车、愿望列表、过滤产品和其他一些较小的项目。我最初使用的是一个大型应用程序（它有路由和所有东西），但当我没有一个完整的RESTAPI时，它有点限制性

我想在angular应用程序之间共享一些服务（购物车服务，因此我可以有一个快速添加按钮，它将反映在迷你购物车中等等），但我不确定最好的方法（如果有方法的话）。仅仅与服务共享一个模块并不能在应用程序中保持相同的状态

我试过了，但我发现两个应用之间的状态都没有更新。下面是我尝试使用的javascript。它还位于JSFIDLE上，附带html：

---

任何帮助都将不胜感激共享的

服务正在共享中，但一个angular应用程序不知道另一个应用程序中有更新的内容，因此它不会启动
$digest
。通过调用
$rootScope.$apply（）

小提琴：

我试图解决一个类似的问题。在不同iFrame中运行的应用程序之间共享工厂。我希望任何帧中的任何
$apply（）
都能在所有其他帧中引起摘要循环。允许简单的
ng单击直接绑定到工厂方法的
，以更新所有其他帧中的视图。我创建了一个处理范围绑定和工厂共享的模块：


只需在每个应用程序中包含模块：

angular.module('App', ['iFrameBind'])

并更改任何工厂的return语句以返回该工厂的共享版本：

return sharedFactory.register('counter', service);

e、 g

.factory（'counter'，函数（sharedFactory）{
var服务；
var=0；
功能公司{
val++；
}
函数dec（）{
瓦尔--；
}
函数值（）{
返回val；
}
服务={
公司:公司,，
十二月:十二月,，
价值：价值
};
返回sharedFactory.register（“计数器”，服务）；
})
.指令（“计数器”，功能（计数器）{
返回{
模板：“{counter.value（）}}”+
“向上”+
"倒",，
限制：'E'，
链接：功能后链接（范围）{
scope.counter=计数器；
}
};
});

当在任一
中单击时，计数器会在两个帧中更新，这两个帧都能正常工作。您建议我如何使用多个共享服务来实现$window.rootScopes？如果我不小心的话，我想它会加倍的。啊，别担心，我找到了一个很好的方法——把它放在应用程序的运行块中，而不是共享块中modules@TomBrunoli你能详细说明你做了什么吗？您是如何将服务代码从共享模块移动到应用程序的运行块而没有错误的？@kevin11我希望能提供帮助，但我已经没有代码了。我们最终将所有内容重新分解为一个应用程序。我可能应该在我有它的时候发布我的解决方案…我知道这真的很旧，但不确定它是如何工作的。当我尝试此操作时，每个WindowsService rootScope集合只是由每个模块添加了一个rootScope，而没有其他模块的rootScope元素。
angular.module('App', ['iFrameBind'])

return sharedFactory.register('counter', service);

.factory('counter', function (sharedFactory) {

  var service;
  var val = 0;

  function inc() {
    val++;
  }

  function dec() {
    val--;
  }

  function value() {
    return val;
  }

  service = {
    inc: inc,
    dec: dec,
    value: value
  };

  return sharedFactory.register('counter', service);
})

.directive('counter', function (counter) {
  return {
    template: '{{counter.value()}} ' +
              '<button ng-click="counter.inc()">Up</button> ' +
              '<button ng-click="counter.dec()">Down</button> ',
    restrict: 'E',
    link: function postLink(scope) {
      scope.counter = counter;
    }
  };
});