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

  显示原文与译文双语对照的内容
0 0

我正在建一个ecommerce站点( 基于shopify ) 和我正在使用多个小AngularJS应用程序来处理这样的事物快速购物车,wishlists,筛选产品和其他一些较小的项目。 我最初的一个大应用程序( 使用路由和任何产品),但这造成了时严格我没有完整REST API 。

有两个地方之间的服务,我想分享Angular应用程序( 购物车服务,让我能享受到快速的添加按钮将反映在迷你购物车和等),但我不确定的最佳方法( 尽量快点) 去操作。 分享我与服务模块不在应用程序中保持相同的状态。

我总算是尝试过,不过,我好像不同时间更新状态的应用。 以下是我尝试使用java script 。 在jsfiddle上也与伴随的html : http://jsfiddle .net/k9KM7/1/

angular.module('test-service', [])
  .service('TestService', function($window){
    var text = 'Initial state';
    if (!!$window.sharedService){
      return $window.sharedService;
    }
    $window.sharedService = {
      change: function(newText){
        text = newText;
      },
      get: function(){
        return text;
      }
    }
    return $window.sharedService;
  });
angular.module('app1', ['test-service'])
  .controller('App1Ctrl', function($scope, TestService){
    $scope.text = function(){ return TestService.get() }
    $scope.change = function(){ TestService.change('app 1 activated') }
  });
angular.module('app2', ['test-service'])
  .controller('App2Ctrl', function($scope, TestService){
    $scope.text = function(){ return TestService.get() }
    $scope.change = function(){ TestService.change('app 2 activated') }
  });
var app1El = document.getElementById('app1');
var app2El = document.getElementById('app2');
angular.bootstrap(app1El, ['app1', 'test-service']);
angular.bootstrap(app2El, ['app2', 'test-service']);

任何帮助将不胜感激

时间:原作者:2个回答

0 0

sharedService正在共享,但一个Angular app并不知道东西在其他app中更新,以免开球了 $digest. 你需要手动通知 $rootScope每个应用程序的启动 $digest通过调用 $rootscope.$apply()

花样: http://jsfiddle .net/pvtpenguin/k9KM7/3/

  angular.module('test-service', [])
  .service('TestService', function($rootScope, $window){
    var text = 'Initial state';
    $window.rootScopes = $window.rootScopes || [];
    $window.rootScopes.push($rootScope);
    if (!!$window.sharedService){
      return $window.sharedService;
    }
    $window.sharedService = {
      change: function(newText){
        text = newText;
        angular.forEach($window.rootScopes, function(scope) {
          if(!scope.$$phase) {
              scope.$apply();
          }
        });
      },
      get: function(){
        return text;
      }
    }
    return $window.sharedService;
  });
原作者:
0 0

我还尝试解决类似的问题。 不同iFrames工厂中运行的应用程序之间共享。 我想要什么 $apply()以便使digest循环在所有其它帧中的任何帧中。 允许简单的 ng-clicks在所有其它帧中直接绑定到一个工厂方法来更新视图。 我创建了一个模块来处理该绑定的作用域并共享工厂:

Click来看plunkr?

只需将该模块包含在每个app :

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

并更改任何工厂是return语句返回的共享版本,工厂:

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

e .g 。

.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;
    }
  };
});

计数器的计数更新时,两个视频帧中单击发生在

原作者:
...