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

如果你需要从纯JavaScript发送消息到一个AngularJS控制器，你可以像这样访问作用域：

var ngScope = angular.element('[ng-controller]').scope(); 
// 或者选择一个更合适的选择器...

然后，你可以在作用域上做任何你想做的事情，比如广播一个事件，甚至只是调用一个函数：

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

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

当我开始将我正在工作的项目迁移到Angular时，我遇到了同样的问题。我需要在我的非angular应用程序中与不同类型的事件进行通信，例如点击。如果您想使用已知的设计模式，可以使用“中介者模式”。它是基于“发布/订阅”的通信方式。您可以拥有中介者的全局单例实例，并从Angular和非Angular应用程序中访问它

这是一个库的链接：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之间通信的方式。

这个解决方案对我来说非常有效。

$on 只监听Angular事件，例如 $broadcast 和 $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示例

希望这可以帮助您，谢谢。