AngularJS - Remove custom event listener

Question

I have a non AngularJS snippet that is communicating with my AngularJS modules via custom events. Each of these AngularJS modules represents a different route. When I am leaving each route $onDestroy is triggered but does not remove the event listener. What am I missing to un-register my custom event?

Non AngularJS HTML Snippet

<script>
function sendEvent() {
    const payload = getPayload();
    const event = new CustomEvent('myCustomEvent', { payload });
    window.dispatchEvent(event);
}
</script>

<button onclick="sendEvent()">Send Custom Event</button>

AngularJS Component

Class ModuleA {
    $onInit() {
        this.$window.addEventListener('myCustomEvent', this.onCustomEventClick.bind(this));
    }

    $onDestroy() {
        this.$window.removeEventListener('myCustomEvent', this.onCustomEventClick.bind(this), false);
    }
}

Class ModuleB {
    $onInit() {
        this.$window.addEventListener('myCustomEvent', this.onCustomEventClick.bind(this));
    }

    $onDestroy() {
        this.$window.removeEventListener('myCustomEvent', this.onCustomEventClick.bind(this), false);
    }
}

jian · Accepted Answer · 2018-09-04 20:39:54Z

2

Every time you call bind it will create a new function and return it instead of modifying the function itself. So the even listeners you provide to addEventListener and removeEventListener are different functions, thus the registered ones are not removed.

To solve it, call bind once in $onInit and keep a reference to the returned function and always use that reference:

Class ModuleB {
    $onInit() {
        this.onCustomEventClick = this.onCustomEventClick.bind(this)
        this.$window.addEventListener('myCustomEvent', this.onCustomEventClick);
    }

    $onDestroy() {
        this.$window.removeEventListener('myCustomEvent', this.onCustomEventClick, false);
    }
}

answered Sep 4, 2018 at 20:39

jian

1,25611 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - Remove custom event listener

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related