Writing an Angular directive with a TypeScript class

Question

I may just be attempting to combine too many "new-to-me" concepts at once, but I am trying to write a custom Angular directive using a TypeScript class. At the moment, I'm not trying to do anything terribly useful, just a POC.

I have a TypeScript file that looks like this:

module App {
    'use strict';

    export class appStepper {

        public link:(scope:angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => void;
        public template:string = '<div>0</div><button>-</button><button>+</button>';
        public scope = {};
        public restrict:string = 'EA';

        constructor(){ }

        public static Factory(){
            var directive = () =>
            { return new appStepper(); };
            return directive;
        }
    }

    angular.module('app').directive('appStepper', App.appStepper.Factory());
}

It compiles to this in JavaScript:

(function(App) {
    'use strict';
    var appStepper = (function() {
        function appStepper() {
            this.template = '<div>0</div><button>-</button><button>+</button>';
            this.scope = {};
            this.restrict = 'EA';
        }
        appStepper.Factory = function() {
            var directive = function() {
                return new appStepper();
            };
            return directive;
        };
        return appStepper;
    })();
    App.appStepper = appStepper;
    angular.module('app').directive('appStepper', App.appStepper.Factory());
})(App || (App = {}));

My angular module looks like (I don't even know if I need to do this):

angular.module('app',['appStepper'])

And I attempt to use it in my view:

<div app-stepper></div>

And get these errors:

 Uncaught Error: [$injector:nomod] 
 Uncaught Error: [$injector:modulerr]

Why doesn't my app know about my directive?

Check this, with detailed explanation and working plunker stackoverflow.com/a/30506888/1679310 — Radim Köhler
– Radim Köhler, Commented Jun 5, 2015 at 18:39
@RadimKöhler - after following that example, I found success! Thank you for sharing. — amlyhamm
– amlyhamm, Commented Jun 5, 2015 at 18:59

Community · Accepted Answer · 2017-05-23 11:44:19Z

4

Though it is not quite the same question, this answer included an example of what I'm attempting to do: How can I define my controller using TypeScript?

I followed the example in the Plnkr it referenced and found success: http://plnkr.co/edit/3XORgParE2v9d0OVg515?p=preview

My final TypeScript directive looks like:

module App {
    'use strict';

    export class appStepper implements angular.IDirective {

        public link:(scope:angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => void;
        public template:string = '<div>0</div><button>-</button><button>+</button>';
        public scope = {};
        public restrict:string = 'EA';

        constructor(){ }

    }

    angular.module('app').directive('appStepper', [() => new App.appStepper()]);
}

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jun 5, 2015 at 19:06

amlyhamm

1,1702 gold badges20 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

Writing an Angular directive with a TypeScript class

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related