複数のangular.jsアプリ間で1つのサービスを共有

Question

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

角度アプリ（カートサービスなので、ミニカートなどに表示されるクイック追加ボタンを使用できます）間で共有したいサービスがいくつかありますが、私はそうではありませんこれについて行くべき最善の方法（道があれば）を確かめてください。サービスとモジュールを共有しても、アプリ全体で同じ状態が維持されるわけではありません。

私は自分の手で試しましたが、私は両方のアプリの間で状態を更新していないようです。以下は私が使用しようとした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']); 

すべてのヘルプは

Answer 1

をいただければ幸いsharedServiceが共有されているが、それはdoesnのように、1つの角度アプリは何か他のアプリで更新されていることを知りません。」 $digestをキックオフします。私は同様の問題を解決しようとしていた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; 
    }); 

Answer 2

：手動で$rootscope.$apply()

フィドルを呼び出すことによって$digestを開始するには、各アプリケーションの$rootScopeを伝える必要があります。異なるiFramesで動作するアプリ間でファクトリを共有する。どんなフレームでも$apply()が他のすべてのフレームでダイジェストサイクルを起こしたかったのです。単純なng-clicksをファクトリメソッドに直接バインドすることで、他のすべてのフレームのビューを更新できます。ただ、各アプリのモジュールを含む

Click here to see 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; 
    } 
    }; 
}); 

カウンターの更新クリックがうまく動作のいずれか