如何在 AngularJS 中收听 jQuery 事件

Posted 2023-05-09

【中文标题】如何在 AngularJS 中收听 jQuery 事件

【英文标题】：How can I listen to jQuery events in AngularJS

【发布时间】：2013-05-06 19:01:17

【问题描述】：

我正在重写一个 jQuery 应用程序以使用 AngularJS。我正在使用小步骤，一次更换一个区域。但是，我对如何在 AngularJS 中收听 jQuery 的事件有疑问。

例如，我在 jQuery 小部件中有一个 $(document).trigger('doSomething')。如何在 AngularJS 控制器中收听它？

我尝试过使用$scope.$on('doSomething', function())，但这只是指控制器的范围。我也试过$rootScope.$on('doSomething', function())，但没有运气。

有什么方法可以让我一步步转换我的应用程序，只听jQuery触发的文档事件？

【参考方案1】：

我在这里开枪，但我认为 jQuery 事件和 AngularJS 事件是两个独立的系统。一个快速的解决方案可能是拥有一个全局的 jQuery 事件侦听器，它将 jQuery 事件转换为 AngularJS 事件。

稍后您可能希望将两个小部件包装在一个指令中，并在其中放置一个更具体的事件转换器。此时，您还可以考虑是否要坚持使用事件系统，或者角度服务是否可能是小部件与世界其他地方通信的更合适方式。

以上假设您不能或不想重写小部件以使用 AngularJS 机制。如果这是一个选项，那么只需在小部件中直接使用$scope.$broadcast 或$scope.$emit 而不是$.trigger。

【讨论】：

我很想将小部件转换为 AngularJS，但这并不容易。我正在使用jpanelmenu.com（然后广播事件），这很难转换为 AngularJS。

【参考方案2】：

你应该看到这个答案：https://***.com/a/15012542/535025

我不确定，但我认为你不能那样做。就像@Supr 所说，它们是两个独立的系统，具有独立的自定义事件。

尽量不要将 jQuery 与 Angular 混用。一个很好的建议是每次你需要调用$('selector').method() 时考虑编写一个指令，因为它负责数据绑定。

【讨论】：

不，它没有。无论如何，您都必须在控制器中处理它。

【参考方案3】：

这是我的解决方案： 在所有 XHR 数据准备好之后，我们需要使用 jQuery 发出“click”事件，在此之前我们可以通过 html 数据属性传输新数据，稍后我们可以从 Angular 中读取它。

HTML 文件

<div class="js-synced-tabs" ng-click="syncWithjQuery()" data-tab-id="1" style="width: 0; height: 0;"></div>
<div class="container" id="draggable-status-list">
<!-- appends from jQuery -->
</div>

jQuery 文件

httpRequest('GET', 'API/point' , function (data) ....
$.each(data, function (i, v) 
html += '<a onclick="'+"jQuery('.js-synced-tabs').data('tab-id',"+ v.id +"); jQuery('.js-synced-tabs').click();"+'">' 
        + v.name
        + '</a>';
$('body').find('.container').html(html);
)

角度文件

$scope.syncWithjQuery = function() 
  $rootScope.issue_tab = angular.element('.js-synced-tabs').data('tab-id');

显示更改 data-tab-id 的示例，在单击选定的选项卡后，因为我们无法通过 ng-click 完成。

onclick="'+"jQuery('.js-synced-tabs').data('tab-id',"+ v.id +"); jQuery('.js-synced-tabs').click();"+'" - 是破解这个

要点： https://gist.github.com/cre-o/f138bdf1cf9e36eed3f9f73b54bb8260

【参考方案4】：

您可以从 jQuery 事件中触发一个 Angular 事件，并在 Angular 中捕获这个其他事件，如下所示：

$( "p" ).on( "click", function() 
    // I'm not sure if you'd need to run code below inside $scope.$apply
    
    // $broadcast will send the event downwards the $scope hierarchy, while $emit will send it upwards
    $scope.$broadcast('jquery-click');
);

稍后在您的代码中的某处：

$scope.$on('jquery-click', function() 
    // desired code in Angular's scope
);