stevo stevo - 1 month ago 19
TypeScript Question

Angularjs controller as via typescript invoke controller function from a directive

I'm trying to invoke a controller function from a directive and I run into the "this" context problem. The logSerivce is not accessible if the function gets called via directive.

Here the controller class:

class MainController implements IMainScope {

static $inject = ["LogService"];

constructor(private logService:ILogService) { }

sayHello(message:string) {
console.log("MainController sayHello", message);
// Cannot read property 'logService' of undefined if gets call from directive
this.logService.log(message);
}
}


Here the directive class:

class TestDirective implements ng.IDirective {
public restrict = "E";
public templateUrl = "test-directive.html";
public replace = true;
public scope:any = {
testFn: "&"
};

constructor() { }

public link:ng.IDirectiveLinkFn = (scope:TestDirectiveScope, element:ng.IAugmentedJQuery, attrs:ng.IAttributes):void => {
scope.hello = () => {
console.log("TestDirective", scope.firstName);
scope.testFn()(scope.firstName);
};
}

static factory():ng.IDirectiveFactory {
let directive:ng.IDirectiveFactory = () => new TestDirective();
return directive;
}
}


Here is a simple plunker example which covers my problem: http://embed.plnkr.co/Ov7crFZkkjDPzilX2BmL/

Answer

The way you are calling testFn from directive isn't correct way. To pass data with calling function you have to first use

ng-click="hello(message)"

And while calling function from directive pass it in json/object format like {message: 'some value'} in parenthesis.

scope.testFn({message: scope.firstName});

Demo Plunkr

Comments