我如何在AngularJS中监听jQuery事件

Question

我正在重写一个jQuery应用程序来使用AngularJS。我正在使用小步骤，并一次更换一个区域。然而，我在如何在AngularJS中监听jQuery的事件方面遇到了问题。

作为一个例子，我在jQuery Widget中有一个$(document).trigger('doSomething')。我怎样才能在AngularJS控制器中听它？

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

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

Answer 1

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

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

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

Answer 2

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

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

尽量不要将jQuery与Angular混合使用。一个好的建议是，每次你需要调用qazxsw poi考虑写一个指令，因为它负责数据绑定。

Answer 3

我在这里猜测，但你可以在jQuery事件中触发一个Angular事件，并在Angular中捕获这个其他事件，如下所示：

$('selector').method()

稍后在代码中的某个地方：

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

Answer 4

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

Html文件

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

jQuery文件

<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>

角度文件

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

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

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

- 是这样的黑客

要点：onclick="'+"jQuery('.js-synced-tabs').data('tab-id',"+ v.id +"); jQuery('.js-synced-tabs').click();"+'"