Call function break area

Question

Same problem as here: AngularJS directive linking a function with multiple arguments

After this answer: stack overflow

In any case, as far as possible.

It works:

<my-directive on-save="ctrl.saveFn"></my-directive> 

FROM

 angular.module('app') .controller('MyController', function($scope) { var vm = this; vm.saveFn = function(value) { vm.doSomethingWithValue(value); } }); 

But when I convert to Typescript and use real classes, it breaks.

 class MyController { constructor() {} saveFn(value) { this.doSomethingWithValue(value); } } 

In Typescript version, when debugging, "this" refers to a global window. So my area is somehow messed up, but I don’t know how to fix it. How can I get "this" for a link to MyController, as expected?

Answer 1

So my area is somehow ruined

Use the arrow function instead of the method.

Fixed

 class MyController { constructor() {} saveFn = (value) => { this.doSomethingWithValue(value); } } 

More details

https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html