Как я могу преобразовать пользовательский слушатель события jquery в слушателя angularjs?

Question

Я создал angularjs компонент. Я написал пользовательский прослушиватель событий в jquery, event запускается библиотекой non-angularjs.

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

myDiv - это div, который является частью angularjs компонента.

Я хочу записать этот слушатель в компонент angularjs. Как я могу это сделать?

PS: ссылка на событие https://github.com/cornerstonejs/cornerstone/wiki/CornerstoneImageRendered-Event

Answer 1

Для архивации того, что вы хотите сначала, вам нужно использовать

angular.element и затем вы можете добавить прослушиватель событий

Answer 2

Создать пользовательскую директиву:

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 3

Если вы собираетесь прослушивать события из внешней, не angularjs, библиотеки, вам нужно уведомить angularjs о том, что произошло изменение. Один из способов сделать это - обернуть свою логику, которая вызывается внешним событием, в метод $ scope. $ Apply . Метод $ apply будет уведомите angularjs о том, что изменение произошло, и запустили дайджест-цикл, который синхронизирует изменение из области видимости в представление.

Добавьте событие внутри контроллера и попробуйте так

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

Вот великая артиллерия на эту тему