从Angular广播到jQuery侦听器

试图让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) {

演示 通常，在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

，在指令中，您应该使用link函数中的

element

参数

您还可以使用

$document

服务触发上的

事件

请确保在Angular library之前包含jQuery，这样jQuery方法将自动包含在

$element

和

$document

服务中

---

我必须是一个说不的人；不要这样做。您所做的，基于事件修改DOM，实际上就是angular的构建目的。将jQuery引入到图中是不必要的，而且只会增加复杂性。查看

ng bind

和

ng model

以了解如何更新DOM以响应数据更改。

Hi Daiwei，我将其更改为document，因为我让整个文档都在侦听它，但触发器在我的情况下不起作用。如果有人不明白，我将创建一个JSFIDLE来提供更好的信息。@Orison刚刚更新了答案以反映您的请求。太棒了，我应该早点在这里发布，以节省15个小时的时间让它工作。plunker示例是kicker，因为我的控制器没有注入$element命令，但一旦注入了$element命令，代码就会顺利运行。祝你有一个幸运的一天，奥里萨尼不要不同意你的逻辑，因为我认为应该对它进行重构，以便在整个过程中使用AngularJS，因为它将使软件变得更好，但是当使用现有软件时，你必须平衡许多其他因素并做出让步，以便继续前进，这就是其中的一种情况。