AngularJS Directive (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!

angular.module('directives', []).directive(Directives) don't think this code will work. You register a typescript module, and without any name — devqon
– devqon, Commented Feb 29, 2016 at 14:06
@devqon I'm doing that for my controllers as well and it's working. Also, the debugger starts debugging in my browser. So it means it at least gets into the module. — peer
– peer, Commented Feb 29, 2016 at 14:10

devqon · Accepted Answer · 2016-02-29 14:37:59Z

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

edited Feb 29, 2016 at 14:37

answered Feb 29, 2016 at 14:11

devqon

14k2 gold badges32 silver badges46 bronze badges

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

5 Comments

peer Over a year ago

Sorry for the late response. I think you're script is working, but I still can't seem to get the directive shown on my page. How would I do that? I though <left-menu></left-menu> would be the trick, but no.. @devqon

devqon Over a year ago

Have you included the 'directives' module in your module where you use it?: angular.module("myModule", ["directives"]);

devqon Over a year ago

You still haven't registered the directive with a name, that should be the first parameter in .directive("leftMenu", leftMenu.factory())

peer Over a year ago

It gives me an error in the console now: docs.angularjs.org/error/$injector/… - Also I tried doing the: "import leftMenu = require("LeftMenu");" which didn't work :s

peer Over a year ago

The error I'm getting on the require is: Error: Can't find module.

Jonathan · Accepted Answer · 2016-02-29 14:32:32Z

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.

Collectives™ on Stack Overflow

AngularJS Directive (TypeScript)

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related