Skip to content

Instantly share code, notes, and snippets.

@johannes-weber
Created November 20, 2015 13:24
Show Gist options
  • Save johannes-weber/7fbbbffcfa6ea382adfd to your computer and use it in GitHub Desktop.
Save johannes-weber/7fbbbffcfa6ea382adfd to your computer and use it in GitHub Desktop.
Using Angular 1.x Directives with TypeScript
export default class BaseDirective {
restrict: any;
scope: any;
template: any;
transclude: any;
require: any;
compile: any;
controller: any;
bindToController: any;
controllerAs: any;
constructor({
template = '',
controller = false,
restrict = 'E',
scope = {},
bindToController = true,
transclude = false,
compile = false,
require = false
}: {
template?: any;
controller?: any;
restrict?: any;
scope?: any;
bindToController?: any;
transclude?: any;
compile?: any;
require?: any
} = {}) {
this.restrict = restrict;
this.scope = scope;
this.template = template;
this.transclude = transclude;
if (controller || _.isObject(bindToController)) {
this.setController(controller, bindToController);
}
if (require) {
this.require = require;
}
if (compile) {
this.compile = compile;
}
}
private setController(controller, bindToController) {
this.controller = controller;
this.bindToController = bindToController;
this.controllerAs = 'vm';
}
}
import BaseDirective from 'utils/base-directive';
const template = require('html!./dummy-name-template.html');
export default class DummyNameDirective extends BaseDirective {
constructor() {
super({
template,
controller: DummyNameDirectiveController
});
}
}
class DummyNameDirectiveController {
username: string;
userId: number;
constructor() {
}
aPublicMethod() {
// do something
}
}
import DummyNameDirective from './dummy-name-directive';
require('./dummy-name.scss');
export default angular.module('AppName.dummyModule', [])
.directive('dummyName', () => new DummyNameDirective())
.name;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment