AngularJS指令（TypeScript）

Question

I'm trying to figure out how to use directives in AngularJS with TypeScript. I have followed a tutorial, where in I followed every step accordingly.. but I ran in to some troubles. For some reason it's not displaying the content of my Directive.

The directive itself:

module Directives {
    debugger;
    export interface IMyScope extends ng.IScope
    {
        name: string;
    }

    export function LeftMenu(): ng.IDirective {
        return {
            template: '<div>{{name}}</div>',
            scope: {},
            link: (scope: IMyScope) => {
                scope.name = 'Aaron';
            }
        };
    }
}

Now, I placed a debugger to check if my code even runs until it reaches the directive, and yes it does. My chrome is debugging on the point where it is supposed to.

Registering all directives (even though I have only one atm):

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

angular.module('directives', []).directive(Directives)

My reference file:

/// <reference path="../wwwroot/libs/bower_components/definitelytyped/angularjs/angular.d.ts" />
/// <reference path="../wwwroot/libs/bower_components/definitelytyped/angularjs/angular-route.d.ts" />
/// <reference path="../wwwroot/libs/dx-libs/ts/dx.all.d.ts" />

/// <reference path="contollers/controllers.ts" />
/// <reference path="directives/directives.ts" />
/// <reference path="app.ts" />

Calling the directive like this:

<div>
    <left-menu></left-menu>
</div>

There are no errors logged what so ever.. So, I hope someone has the solution to this problem.

Thanks in advance!

Answer 1

You have to register a directive with a name as first parameter. This is how I would write your directive in combination with typescript:

export = class LeftMenu implements angular.IDirective {
    static ID = "leftMenu";

    public restrict = "AE";
    public template = '<div>{{name}}</div>';
    public scope = {};
    public link = (scope: IMyScope) => {
        scope.name = 'Aaron';
    }

    // to show how to handle injectables
    constructor(private somethingInjected){}

    static factory() {
        // to show how to handle injectables
        var directive = (somethingInjected) => new MyDirective(somethingInjected);
        directive.$inject = ["somethingInjected"];
        return directive;
    }
}

and to register it:

import leftMenu = require("LeftMenu");

angular.module('directives', []).directive(leftMenu.ID, leftMenu.factory());

Answer 2

The debugger fires because you actually submit an object to .directive (typescript transpiles modules into objects by default).

You could try to initialize the directive either directly in the file declarating it:

angular
    .module("module.a")
    .directive("directive.a", (): angular.IDirective =>
    {
        return {
            restrict: "E",
            templateUrl: "template.a.html",
            controller: "controller.a",
            controllerAs: "$ctrl",
            link: () => {},
            bindToController: true
        };
    });

or simply the exported function

angular
    .module("module.a")
    .directive("directive.a", Directives.LeftMenu);

I am not aware of a typescript-module-aware version of the .directive function of angular, that registeres all directives of a module.