Angular seems to be experiencing issues with maintaining context when executing a function reference for a base class method

Question

Angular seems to be experiencing issues with maintaining context when executing a function reference for a base class method

Imagine we have CtrlOne that extends CtrlTwo, with a componentOne instantiated in the template of CtrlOne. Here is some code to illustrate the issue:

class CtrlOne extends CtrlTwo {
    constructor() { super(); }
}

class CtrlTwo {

    sayMyName(name: string) {
        console.log(this.getMyLastName() + name);
    }

    getMyLastName() {
       return 'squarepants';
    }  
}

This is the template associated with CtrlOne:

<component-one data-say-my-name="vm.sayMyName"></component-one>

And this is the stateless componentOne:

angular.module('mymodule').component('componentOne', {
     bindings: {
         sayMyName: '&'
     },
     template: '<button data-ng-click="$ctrl.sayMyName()('spongebob')></button>'
});

When clicked, the function sayMyName from CtrlTwo is successfully called, but it fails to recognize this.getMyLastName and throws

TypeError: this.getMyLastName is not a function

.

If I directly use sayMyName or getMyLastName from the CtrlOne template, everything works as expected. However, if I access them through the binding passed to componentOne, the error occurs.

What could be causing this discrepancy?

javascript angularjs typescript

Answer 1

Answer №1

It is important to bind class methods that are used as callbacks to their context.

For example

class Controller {
    constructor() {
        this.doSomething = this.doSomething.bind(this);
    }
    ...
}

or

class Controller {
    doSomething = (param: string) => { ... }
    ...
}

Answer 2

It is important to bind class methods that are used as callbacks to their context.

For example

class Controller {
    constructor() {
        this.doSomething = this.doSomething.bind(this);
    }
    ...
}

or

class Controller {
    doSomething = (param: string) => { ... }
    ...
}

Angular seems to be experiencing issues with maintaining context when executing a function reference for a base class method

Answer №1

Similar questions

Using inline SVG in a Vite production build

Providing inputs to $resource

App.post is returning a set of empty curly braces as the response

Navigating with buttons in React JS

Adding npm packages to your Vue.js application

Creating a specialized Typescript deep partial type for specific attributes

Toggle visibility

Exploring the fruitful synergy of Node.js, Mongoose and MongoDB in Typescript for powerful MapReduce operations using the emit() function

AngularJS - Issue with ng-mouseover not triggering controller function

In Safari, non-ascii characters are incorrectly stored in document.cookies as trash

Display the two values of an object pair using ng-repeat in AngularJS

AngularJS provides users with the ability to access additional information by matching specific identification

Is there a way to locate an element within innerHTML using getElementById?

How to Handle the Absence of HTML5 Spellcheck in Specific Web Browsers

Exploring the integration of d3 in an Express application - encountering an error: document is not recognized

How can you effectively transfer arguments from one component to another using router.push() in Vue.js?

Is there a way to position one DIV behind another?

Steps for transforming an array of arrays into a JSX element within a React component, where each nested array contains its own clipPath

Are there any jQuery plugins available that can display a loader image while a page is loading?

Tricks for refreshing cached web page assets in the year 2023