34

私は（shopifyに基づいて）eコマースサイトを構築しており、複数の小さなangularjsアプリを使用して、クイックショッピングカート、ウィッシュリスト、製品のフィルタリング、その他のいくつかの小さなアイテムなどを処理しています。最初は 1 つの大きなアプリケーション (ルーティングなどすべてを含む) を使用していましたが、完全な REST API を持っていなかったときは少し制限がありました。

angular アプリ間で共有したいサービスがいくつかあります (カート サービス。ミニカートなどに反映されるクイック追加ボタンを使用できます)。これについて行く方法（方法がある場合）。モジュールをサービスと共有するだけでは、アプリ間で同じ状態が維持されません。

私はそれを試してみましたが、両方のアプリ間で状態を更新していないようです。以下は私が使ってみたjavascriptです。また、html を伴う jsfiddle にもあります: 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']);

どんな助けでもいただければ幸いです

4

2 に答える 2

3

私は同様の問題を解決しようとしていました。異なる iFrame で実行されているアプリ間でファクトリを共有します。$apply()どのフレームでも、他のすべてのフレームでダイジェスト サイクルが発生するようにしたかったのです。ファクトリ メソッドに単純ng-clicksに直接バインドして、他のすべてのフレームのビューを更新できるようにします。スコープのバインドとファクトリの共有を処理するモジュールを作成しました。

plunkrを見るにはここをクリック

各アプリにモジュールを含めるだけです。

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

そして、ファクトリの return ステートメントを変更して、そのファクトリの共有バージョンを返します。

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

いずれかでクリックが発生すると、両方のフレームでカウンタが更新されます

于 2014-09-04T16:50:03.443 に答える