如何在AngularJS中侦听jQuery事件

我正在使用AngularJS重写一个jQuery应用程序。我使用小步骤，每次更换一个区域。然而，对于如何在AngularJS中收听jQuery的事件，我有一些问题

例如，我在jQuery小部件中有一个

$（document.trigger（'doSomething'）

。如何在AngularJS控制器中收听

我尝试过使用（'doSomething'，function（）{}）上的

$scope.$on，但这只引用了控制器的作用域。我还尝试了（'doSomething'，function（）{}）

，但没有成功

---

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

我在这里是即兴发挥，但我认为jQuery事件和AngularJS事件是两个独立的系统。一个快速的解决方案可能是使用一个全局捕获所有jQuery事件的侦听器，将jQuery事件转换为AngularJS事件

稍后，您可能需要将小部件包装在一个指令中，并在其中放置一个更具体的事件转换器。在这一点上，您也可以考虑是否要坚持事件系统，或者如果角度服务可能是小部件与世界其他地方通信的一种更合适的方式。

---

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

$scope.$broadcast

或

$scope.$emit

，而不是

$。触发器

您应该会看到以下答案：

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

---

尽量不要将jQuery与Angular混合使用。一个很好的启示是每次你需要调用<代码> $（‘选择器’）.Multor（）>考虑写一个指令，因为它负责数据绑定。

这里我猜，但是你可以从jQuery事件中触发一个角度事件，并且以一个角度捕获这个事件，比如：

$( "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
});

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

Html文件

jQuery文件 示例显示在单击所选选项卡后更改数据选项卡id，因为我们无法通过ng click执行此操作

onclick=“'+”jQuery（'.js同步选项卡'）.data（'tab-id'，“+v.id+”）；jQuery（'.js同步选项卡'）。单击（）；“+”

-就是为了这个

要点：

---

我很想将小部件转换为AngularJS，但这并不容易。我正在使用（然后广播事件），这很难翻译成AngularJS。不，它没有。您必须在控制器中处理这些问题。

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