I'm trying to create an AngularJS directive using TypeScript. My directive requires 'ngModel' and I'm also using a custom service injected in my directive. My main problem is that my service can't be used inside my link function.
Here is an example of what I'm trying to achieve:
module app.directives {
export var directiveName: string = "theDirective";
angular.module("myApp").directive(directiveName,
(myFactory: app.services.MyFactory) =>
{
return new MyDirective(myFactory);
});
export interface IMyDirectiveScope extends ng.IScope {
ngModel: ng.INgModelController;
}
export class MyDirective implements ng.IDirective {
restrict = "A";
require = "ngModel";
scope = {
ngModel:'='
}
constructor(private myFactory: app.services.MyFactory) {
}
link(scope: IMyDirectiveScope , elem: JQuery, attributes: ng.IAttributes, ngModel: ng.INgModelController) {
//this is window here
elem.bind('blur', (evt: JQueryEventObject) => {
//keyword this is also window here, so yeah bummer indeed
validate();
});
function validate() {
//I need to use my factory here, but I can seem to get it.
//this is always window and I'm kinda stuck here
}
}
}
}
I can't seem to find some more advanced stuff on this topic. All the examples don't I find don't seem to uses services or a complex link function. Please answer this question with some sort of example. It's trickery that you think.
Update: The fact that 'this' inside my link function is window and not 'MyDirective' doesn't make much sense to me. Any ideas why that would be?