javascript - AngularJS trigger and watch object value change in service from controller from another module (Extended) -

referring question angularjs trigger , watch object value change in service controller

it trying watch changes in service controller. im trying extend handle multiple module (concurrent app in same page's different div's) communication.

problem:

i want achieve similar feat, slight different scenario. have 2 modules myapp , yourapp example. myapp has service. want watch changes in myapp's service within yourapp module's controller. can done? or there different method reflect , detect data changes of 1 module inside module.

consider example code below:

html

<div ng-app="myapp">     <div ng-controller="myctrl">         <div ng-click="setftag()">click me</div>     </div> </div> <div ng-app="yourapp">     <div ng-controller="yourctrl">            </div> </div> 

javascript

// myapp module var myapp = angular.module('myapp',[]);  // myapp's service myapp.service('myservice', function() {     this.tags = {         a: true,         b: true     };      this.setfalsetag = function() {         alert("within myservice->setfalsetag");         this.tags.a = false;         this.tags.b = false;      //how watch in yourctrl of yourapp module triggered?     }; });  // myapp's controller myapp.controller('myctrl', function($scope, myservice) {      //$scope.myservice = myservice;         $scope.setftag = function() {         alert("within myctrl->setftag");         myservice.setfalsetag();     };              /*     $scope.$watch(function () {         return myservice.tags;     }, function(newval, oldval) {         alert("inside watch");         console.log(newval);         console.log(oldval);     }, true);       */ });  // yourapp module (injecting myapp module yourapp module) var yourapp = angular.module('yourapp',['myapp']); // yourapp's controller yourapp.controller('yourctrl', function($scope, myservice) {      $scope.$watch(function () {         return myservice.tags;     }, function(newval, oldval) {         alert("inside watch of yourcontroller");         console.log(newval);         console.log(oldval);     }, true);  }); 

note: not sure if right way communicate between modules. suggestion or solution highly appreciated.

p.s. ive bootstrapped 2 modules fit same page.

jsfiddle

communicating between modules whole different story communicating between apps.

in case of communicating between modules, it's matter of injecting module module b.

in case, module b has complete access inject/communicate anything exposed in module a.

---

communicating between apps however, more complicated. need setup 'outside' angular world, accepting properties both applications.

i've put jsbin, showcasing how can it.

with said, i'm not sure recommend - again best practices on subject not exist afaik.

the gist of is;

1. setup new instance of shared service lives outside angular world.
2. attach instance of said service window.
3. access above instance in app specific services/controllers through $window.
4. register each $scope needs access data stored in shared service.
5. upon updating data in shared service, loop through registered $scopes , trigger $evalasync(so not end $digest in progress).
6. watch data synced across applications.

---

this poc on how it, not recommend sort of blows when comes unit testing. , because exposing properties on window. yuck.

sure, disregard exposing on window - code have live in same file (afaic). yet another, yuck.

---

to build upon this, if decide (or, able to) use single app (multiple modules fine) , want communicate/sync service multiple components reckon best way so:

app.service('shared', function () {   var data = {       a: true,       b: true   };    this.toggle = function() {     data.a = !data.a;     data.b = !data.b;   };    object.defineproperty(this, 'data', {       get: function () {           return data;       }   });       }); 

by using object getter, won't need setup $watch sync data across components within same module. nor trigger manual $digest's.

another jsbin - showcasing above.

---

the difference between two modules , two apps see it:

2 modules

two separate modules gets 'bundled' single application (either third module, or injecting module b).

var app1 = angular.module('app1', ['app2', 'app3']);  var app2 = angular.module('app2', []);  var app3 = angular.module('app3', []);  angular.bootstrap(/*domelement*/, app1); 

---

2 apps

var app1 = angular.module('app1', []); var app2 = angular.module('app2', []);  angular.bootstrap(/*domelement1*/, app1); angular.bootstrap(/*domelement2*/, app2); 

i don't think there any point in having 2 applications , share state between two. think whole point running 2 applications separate two. otherwise it's on engineering imho.

some thoughts:

• you add common dependency both applications. wont shared state, have access same implementation in both apps.
• you possibly utilise sessionstorage medium of transportation data between 2 applications. make sure cleanup afterwards :)