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

Question

我正在通过 angular.bootstrapping 使用 Angular 模块将非 angular 网页的一部分变成 Angular 版本。除了需要与页面的其他部分通信之外，它工作得很好。很遗憾，我目前无法将页面的其余部分转换为 Angular。

到目前为止我想出的最好的方法是在包含我需要交流的信息的引导元素上触发 vanilla JS 事件。

是否有既定的模式或更好的方法？

Answer 1

$on 仅侦听 angular 事件，例如 $braodcast 和 $emit，它们将仅在引导应用程序模块中工作。

如果你想听 jQuery 事件那么它应该使用 .on/.bind 就像我们在 jquery 中所做的那样 $('selector').on('event',function(){});

如果多个事件与单个 DOM 元素相关联，那么首选指令将是跟踪元素事件的更好方式。

指令：

app.directive('myCustomer', function() {
  return {
    restrict: 'E',
    compile: function(element,attrs){
       element.on('click focus blur',function(){
          //code here
       });
    }
  };
});

否则你可以在特定元素上绑定事件侦听器，然后你可以通过 jQLite 使用 $document、$window、$element 来绑定它（提供控制器水平元素）依赖。

控制器

$document.find('.myClass').on('click',function(e){ //placing on specific element.
   //code here
});

Plunkr Example

希望对您有所帮助，谢谢。

Answer 2

如果您需要从 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 发送消息应该简单得多。只需调用全局事件或访问全局 function/property.

Answer 3

当我开始将我正在处理的项目迁移到 Angular 时，我遇到了同样的问题。我必须就不同类型的事件进行交流，例如使用我的非 angular 应用程序进行点击。如果您想使用已知的设计模式，您可以选择“中介者模式”。这是一个基于 publish/subscribe 的通信。您可以拥有调解器的单例全局实例并从 angular 和您的非 angular 应用程序

访问它

这是库的 link：http://thejacklawson.com/Mediator.js/

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

window.mediator = new Mediator();

稍后您可以在 Angular 应用程序中拥有如下服务：

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

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

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

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

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

现在您可以同时使用 Angular 和非 Angular 方式在您的应用程序之间进行通信。

这个解决方案对我来说很神奇。

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

How do I communicate between an Angular app and non-angular app on the same page?

javascript

communication

dom-events

angularjs

angularjs-directive