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的通信。您可以拥有介体的单例全局实例，并从角度和非角度应用程序

访问它

这是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方式进行通信。

这个解决方案给我带来了奇迹，我希望它对你也有所帮助。

让我知道，干杯！

Answer 3

$on只会监听角色事件，例如$braodcast＆amp;仅$emit，它们仅在引导的应用模块中工作。

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

如果多个事件与单个DOM元素相关联，那么更喜欢Directive将是跟踪元素事件的更好方式。

<强>指令：

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

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

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

3 个答案: