如何在同一页面上的Angular应用程序和非角度应用程序之间进行通信？

Question

我正在通过angular.bootstrapping它使用Angular模块将一个非角度的网页转换为Angular版本.除了需要与页面的其他部分进行通信之外,它工作得很好.不幸的是,我目前无法将页面的其余部分转换为Angular.

到目前为止,我想要做到这一点的最好方法是在bootstrapped元素上触发包含我需要通信的信息的vanilla JS事件.

是否有既定的模式或更好的方法来做到这一点？

Answer 1

如果您需要从vanilla javascript向AngularJS控制器发送消息,您可以像这样访问范围:

var ngScope = angular.element('[ng-controller]').scope(); 
// or choose a more appropriate selector...

然后,您可以在范围内执行任何操作,例如广播事件或甚至只调用函数:

ngScope.$broadcast('myEvent');
ngScope.$apply(ngScope.controllerFunction());

从Angular发送消息到vanilla javascript应该更加简单.只需调用全局事件或只访问全局函数/属性即可.

Answer 2

当我开始将我正在处理的项目迁移到 Angular 时，我遇到了同样的问题。我必须与我的非角度应用程序就不同类型的事件进行通信，例如点击。如果您想使用已知的设计模式，您可以使用Mediator pattern. 它是publish/subscribe基于通信的。您可以拥有中介者的单例全局实例，并从 angular 和非 angular 应用程序访问它

这是 lib 的链接：http : //thejacklawson.com/Mediator.js/

在您的应用程序（两者）加载之前，您可以执行以下操作：

window.mediator = new Mediator();

稍后你可以在你的 Angular 应用程序中使用这样的服务：

angular.module()
   .service('mediator', function() {
     var mediator = window.mediator || new Mediator();
     return mediator;
 });

从您的非角度应用程序中，您可以简单地执行以下操作：

mediator.subscribe('something', function(data){ ... });

从你的 Angular 控制器或你拥有的任何东西中，你将注入mediator创建的服务并像这样使用它：

mediator.publish('something', { data: 'Some data' });

现在Angular，您的应用程序之间既有非 Angular 通信方式，也有非 Angular 通信方式。

这个解决方案对我来说很神奇，我希望它也能帮助你。

让我知道，干杯！