TypeScript TypeScript with AngularJS Directive


interface IMyDirectiveController {
    // specify exposed controller methods and properties here
    getUrl(): string;

class MyDirectiveController implements IMyDirectiveController {

    // Inner injections, per each directive 
    public static $inject = ["$location", "toaster"];

    constructor(private $location: ng.ILocationService, private toaster: any) {
        // $location and toaster are now properties of the controller

    public getUrl(): string {
        return this.$location.url(); // utilize $location to retrieve the URL

 * Outer injections, for run once controll. 
 * For example we have all templates in one value, and we wan't to use it.
export function myDirective(templatesUrl: ITemplates): ng.IDirective {
    return {
        controller: MyDirectiveController,
        controllerAs: "vm",

        link: (scope: ng.IScope,
               element: ng.IAugmentedJQuery,
               attributes: ng.IAttributes,
               controller: IMyDirectiveController): void => {

            let url = controller.getUrl();
            element.text("Current URL: " + url);


        replace: true,
        require: "ngModel",
        restrict: "A",
        templateUrl: templatesUrl.myDirective,

myDirective.$inject = [

// Using slug naming across the projects simplifies change of the directive name
myDirective.prototype.slug = "myDirective";

// You can place this in some bootstrap file, or have them at the same file
    directive(myDirective.prototype.slug, myDirective);