如何将自定义 jquery 事件侦听器转换为 angularjs 侦听器？

Question

我已经创建了 angularjs 组件。我在jquery写了一个自定义事件监听器，event被非angularjs库触发。

$( "#myDiv" ).on( "CornerstoneImageRendered", function(e) {
   // buisness logic
});

myDiv 是一个 div，它是 angularjs 组件的一部分。

我想将此侦听器写入 angularjs 组件。我该怎么做？

PS: 事件 link https://github.com/cornerstonejs/cornerstone/wiki/CornerstoneImageRendered-Event

Answer 1

如果您要监听来自外部非 angularjs 库的事件，您需要在发生更改时通知 angularjs。一种方法是将由外部事件触发的逻辑包装在 $scope.$apply 方法中。 $apply 方法将通知 angularjs 发生了更改并触发了摘要循环，该循环会将更改从范围同步到视图。

在控制器中添加事件并像这样尝试

$("#myDiv").on("CornerstoneImageRendered", function(e) {
    $scope.$apply(function () {
        // buisness logic on the scope
    });
});

Here's 关于这个主题的精彩文章

Answer 2

要首先存档您需要的内容，您需要使用

angular.element 然后你可以添加事件监听器

Answer 3

创建自定义指令：

app.directive("myEventListener", function() {
    return {
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        elem.on( "CornerstoneImageRendered", function(event) {
            // business logic
            scope.$eval(attrs.myEventListener, {$event: event});
            scope.$apply();
        });
    }
});

用法

<div id="myDiv" my-event-listener="onMyEvent($event)">
</div>

JS

$scope.onMyEvent = function(event) {
    console.log(event);
};

有关详细信息，请参阅 AngularJS Developer Guide - Creating Custom Directives

如何将自定义 jquery 事件侦听器转换为 angularjs 侦听器？

How can I convert custom jquery event listener into angularjs listener?

angularjs

cornerstonejs

用法

JS