AngularJS+Typescript - Controller inside a directive

Question

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 compiling.

/// <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.

basarat · Accepted Answer · 2014-01-12 22:18:41Z

5

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) {
    }
}
});

answered Jan 12, 2014 at 22:18

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

giulio Over a year ago

I thought I had tried this. It worked like a charm. Thank you :)

Michel Ank · Accepted Answer · 2015-04-15 20:03:50Z

0

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())

answered Apr 15, 2015 at 20:03

Michel Ank

113 bronze badges

Collectives™ on Stack Overflow

AngularJS+Typescript - Controller inside a directive

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related