从 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) {

Demo 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'});

注意力

1. $element服务不能注入到任何地方。在控制器中，您可以使用$element，在指令中，您应该使用element来自链接函数的参数。

2. 你也可以使用$document触发服务event on.

3. 确保在 Angular 库之前包含 jQuery，这样 jquery 方法将自动包含在$element and $document服务。