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 functionIf 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?