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

Question

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

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

myDiv 是组件div的一部分angularjs。

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

PS：活动链接https://github.com/cornerstonejs/cornerstone/wiki/CornerstoneImageRendered-Event

Answer 1

创建自定义指令：

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 开发人员指南 - 创建自定义指令

Answer 2

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

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

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

这是关于这个主题的一篇很棒的文章

Answer 3

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

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