如何在同一页上的Angular应用程序和非Angular应用程序之间进行通信？
IT小君
2023-05-12T00:48:27 我正在将一个非Angular的网页部分转换成Angular版本，通过使用Angular模块进行angular.bootstrap。它工作得很好，但它需要与页面的其他部分通信。不幸的是，我现在不能将页面的其余部分转换为Angular。
到目前为止，我想到的最好的方法是在包含我需要通信的信息的引导元素上触发原始JS事件。
是否有已经建立的模式或更好的方法来做到这一点？
IT小君 当我开始将我正在工作的项目迁移到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之间通信的方式。
这个解决方案对我来说非常有效。
IT小君 $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
});
希望这可以帮助您，谢谢。
如果你需要从纯JavaScript发送消息到一个AngularJS控制器，你可以像这样访问作用域：
然后，你可以在作用域上做任何你想做的事情，比如广播一个事件，甚至只是调用一个函数：
从Angular发送消息到纯JavaScript应该更简单。只需调用全局事件或访问全局函数/属性即可。