AngularJS Typescript Directive

Question

Having problems creating nested directive using Typescript. I can do it in simple AngularJs: http://plnkr.co/edit/UruTqEdMnqNT5wjxcQNC?p=preview ,

but using TypeScript it gives me "No controller" error message.

/// <reference path="../../Scripts/AngularJs/Typings/angular.d.ts" />

export class directiveA {
    public static $inject: Array<string> = [];
    constructor() {
        var directive: ng.IDirective = {};
        directive.priority = 0; 
        directive.restrict = "A";
        directive.scope = {};
        directive.transclude = true;
        directive.templateUrl = "otherTemplate.html";
        directive.replace = true;
        directive.controller = function ($scope, $element) {
            this.flip = function () {
                $element.toggleClass("flipped");
             }
        }
        directive.replace = true;

        return directive;
    }
} 


export class directiveB{
    public static $inject: Array<string> = [];
    constructor() {
        var directive: ng.IDirective = {};
        directive.require = "^directiveA";
        directive.priority = 1;
        directive.restrict = "A";
        directive.scope = {
            simplrSide : "@"
        };
        directive.transclude = true;
        directive.templateUrl = "templeUrl.html";
        directive.link = function (scope, iElement, iAttrs, simplrEditable) {
            scope.flip = function () {
                simplrEditable.flip();
            }
        }
        directive.replace = true;
        return directive;
    }
}

I dont know if its relevant, but i am using AMD Require.JS for script load

Answer 1

Assuming you are registering these as :

import mod = require('yourfile')
youmodule.directive('directiveA',mod.directiveA);
youmodule.directive('directiveB',mod.directiveB);

That should work as long as your html looks like:

<div directiveA>
  <div directiveB>
  </div>
</div>

A couple of notes beyond that:

Use functions for your directive definitions.

This is because directives (unlike controllers) are called without the new operator. So if you have something like:

class Test{
    foo = "EAC";
    constructor(){
        var directive:any = {}; 
        directive.restrict = this.foo;
    }
} 

It compiles to incorrect javascript. As the function Test is called without the new operator and that means that this refers to window and not an instance of the class. So you can't use anything defined outside the constructor anyways. I recommend something like:

function foo():ng.IDirective{
    return {
        restrict: 'EAC';    
    }
}

This way typescript will help you write correct javascript for angular instead of point you in the wrong way. I will make a video about this at some point

Use classes for your controller Controllers inside of directives are also called with the new operator. Same as controllers outside : http://www.youtube.com/watch?v=WdtVn_8K17E Again let typescript help you with the meaning of this inside the controller definition. Plus you can use the type for the controller in the child directive something like (for typesafety and inference):

link: function (scope, iElement, iAttrs, simplrEditable:YourControllerClass)

For injection into directive functions I still use $inject. I have the following interface definition :

interface Function{
    $inject:string[]
}

This means you can do :

foo.$inject = ['$compile']; // e.g