7

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

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

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

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

4

4 回答 4

6

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

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

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

于 2013-05-12T19:53:36.580 回答
1

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

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

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

于 2013-05-12T23:52:41.043 回答
0

您可以从 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
});
于 2015-11-13T14:13:17.180 回答
0

这是我的解决方案：在所有 XHR 数据准备好之后，我们需要使用 jQuery 发出“点击”事件，在此之前我们可以通过 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

于 2019-02-22T15:04:27.077 回答