jquery - 从 Angular 广播到 jQuery 监听器

Question

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

在 jQuery 中我有类似的东西:

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

在 AngularJS 中我有这样的东西:

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

jQuery 不应该能够监听 AngularJS 正在广播的广播或者仅通过以下方式与 AngularJs 绑定(bind):

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

Answer 1

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

一般来说，在 DOM 元素上触发的事件会将 DOM 树向上冒泡到目标元素的所有父元素。因此，您可以在 Controller 中注入(inject) $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 服务不能在任何地方注入(inject)。在 Controller 中，您可以使用 $element，在指令中，您应该使用链接函数中的 element 参数。

2. 您还可以使用$document服务来触发事件。

3. 请务必在 Angular 库之前包含 jQuery，这样 jquery 方法将自动包含在 $element 和 $document 服务中。