从 Angular 广播到 jQuery 监听器答案

【问题标题】：Broadcast from Angular to a jQuery Listener从 Angular 广播到 jQuery 监听器
【发布时间】：2014-01-14 22:26:11
【问题描述】：

试图让 AngularJS 广播一个 jQuery 正在监听的自定义事件。

在 jQuery 中我有类似的东西：

$( document ).on( "myCustomEvent", function( event, data ) {
    $( this ).text( data.myName + ", hi there!" );
});

在 AngularJS 中我有这样的东西：

$rootScope.$broadcast('myCustomEvent', data);

难道 jQuery 不应该能够监听 AngularJS 正在广播的广播或仅通过以下方式与 AngularJs 绑定的广播：

$scope.$on.('myCustomEvent', function(event,data) {

【问题讨论】：

标签： jquery angularjs

【解决方案1】：

演示http://plnkr.co/edit/WFERKW?p=preview

一般来说，在 DOM 元素上触发的事件会在 DOM 树上冒泡到目标元素的所有父级。因此，您可以在控制器中注入$element 服务并在其上触发事件。

// Document as a parent of `$element` will receive this event
$(document).on('myCustomEvent', function(event, data) {
  console.log(data);
});


// In controller
$element.trigger('myCustomEvent', {myName: 'Steve Jobs'});

注意

$element 服务不能到处注入。在控制器中，您可以使用$element，在指令中，您应该使用链接函数中的element 参数。
您还可以使用$document 服务来触发event。
一定要在Angular库之前包含jQuery，这样jquery方法会自动包含在$element和$document服务中。

【讨论】：

嗨 Daiwei，我将其更改为文档，因为我有整个文档都在监听它，但触发器在我的情况下不起作用。如果有人无法弄清楚，那么我将创建一个 jsfiddle 以提供更好的信息。
@Orison 刚刚更新了答案以反映您的要求。
太棒了，我应该早点在这里发帖，这样可以节省 15 个小时的时间来让它工作。 plunker 示例是踢球者，因为我的控制器没有注入 $element 命令，但一旦注入，代码就可以顺利运行。祝你有幸福的一天，奥里森

【解决方案2】：

我必须是一个反对者；不要这样做。你正在做什么，根据事件修改 DOM，实际上就是 Angular 的构建目的。将 jQuery 引入图片是不必要的，只会增加复杂性。查看 ng-bind 和 ng-model 以了解如何更新 DOM 以响应您的数据更改。

【讨论】：

我不同意您的逻辑，因为我认为应该将其重构为始终使用 AngularJS，因为它将使软件变得更好，但是在使用现有软件时，您必须平衡许多其他因素并在以下方面做出让步为了继续前进，这就是其中一种情况。