angularjs - Most standard way to handle communication between isolated modules in Angular 1.x

Question

I am working on a set of enterprise style applications that share some common functionality. An example of this would be navbar functionality such as sorting/ breadcrumbs, etc. It seems pretty straight forward to allow this by creating multiple modules. I have an example plnkr of what I am talking about.

    var appWrap = document.getElementById('app');
    angular.element(appWrap).ready(function() {
      angular.bootstrap(appWrap, ['plunker']);
    });
    var appWrap2 = document.getElementById('app2');
    angular.element(appWrap2).ready(function() {
      angular.bootstrap(appWrap2, ['plunker2']);
    });

My question is, when I need to send a value from app to app2 what would I do? Would I just create some sort of JS listener?

Answer 1

我最终做了这个有点hacky......

var appWrap = document.getElementById('app');
var appScope = angular.element(appWrap).scope();
console.log(appScope.property);

这是来自 app2 模块。您还可以观看和其他事情，只要确保 $apply因为您在不同的应用程序中！