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 Developer Guide - Creating Custom Directives

Answer 2

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

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

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

Here's关于这个主题的伟大艺术

Answer 3

要首先存档您需要的内容

angular.element 然后您可以添加事件侦听器

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

3 个答案:

用法

JS