I am trying to add put my whole class containing the controller inside my directive, put for some obvious reasons scope and syntax is incorrect. I am using typescript as language and grunt-ts for the automatic generation and piling.

/// <reference path="../reference.ts" />

directives.directive('myDirective', function ():ng.IDirective {
return {
    restrict: 'EAC',
    template: directiveHTML.html, \\  thanks to grunt-ts this work fine
    controller: MyControllerClass, \\ here I get the error and here I would like to
                                      put my own controller class instead of a function
    link: function (scope, elements, attrs) {
    }
}

});

and here the class of my controller

module Controllers {
    export class CursorController {
        constructor($scope, socket){
        }
    }
}

Where all the controller are then added to the controllers module of angularJS (references are generated automatically by grunt-td).

/// <reference path="../reference.ts" />
angular.module('controllers',[]).controller(Controllers);

Any clue or suggestion on how to solve this problem would be great.

I am trying to add put my whole class containing the controller inside my directive, put for some obvious reasons scope and syntax is incorrect. I am using typescript as language and grunt-ts for the automatic generation and piling.

/// <reference path="../reference.ts" />

directives.directive('myDirective', function ():ng.IDirective {
return {
    restrict: 'EAC',
    template: directiveHTML.html, \\  thanks to grunt-ts this work fine
    controller: MyControllerClass, \\ here I get the error and here I would like to
                                      put my own controller class instead of a function
    link: function (scope, elements, attrs) {
    }
}

});

and here the class of my controller

module Controllers {
    export class CursorController {
        constructor($scope, socket){
        }
    }
}

Where all the controller are then added to the controllers module of angularJS (references are generated automatically by grunt-td).

/// <reference path="../reference.ts" />
angular.module('controllers',[]).controller(Controllers);

Any clue or suggestion on how to solve this problem would be great.

• javascript
• angularjs
• controller
• gruntjs
• typescript

2 Answers 2

You should be able to do :

directives.directive('myDirective', function ():ng.IDirective {
return {
    restrict: 'EAC',
    template: directiveHTML.html, \\  thanks to grunt-ts this work fine
    controller: Controllers.CursorController, \\ Lookup controller by name
    link: function (scope, elements, attrs) {
    }
}
});

I'd suggest something like this:

export class MyDirective implements ng.IDirective {

    public injection(): Array<any> {
        return [
            () => { return new MyDirective() }
        ]
    }

    public replace: boolean = true;

    public controller = () => {
        console.log('trying');
    }
}

And here:

angular.module('myApp', []).directive('myDirective', MyDirective.prototype.injection())