Example
interface IMyDirectiveController {
// specify exposed controller methods and properties here
getUrl(): string;
}
class MyDirectiveController implements IMyDirectiveController {
// Inner injections, per each directive
public static $inject = ["$location", "toaster"];
constructor(private $location: ng.ILocationService, private toaster: any) {
// $location and toaster are now properties of the controller
}
public getUrl(): string {
return this.$location.url(); // utilize $location to retrieve the URL
}
}
/*
* Outer injections, for run once controll.
* For example we have all templates in one value, and we wan't to use it.
*/
export function myDirective(templatesUrl: ITemplates): ng.IDirective {
return {
controller: MyDirectiveController,
controllerAs: "vm",
link: (scope: ng.IScope,
element: ng.IAugmentedJQuery,
attributes: ng.IAttributes,
controller: IMyDirectiveController): void => {
let url = controller.getUrl();
element.text("Current URL: " + url);
},
replace: true,
require: "ngModel",
restrict: "A",
templateUrl: templatesUrl.myDirective,
};
}
myDirective.$inject = [
Templates.prototype.slug,
];
// Using slug naming across the projects simplifies change of the directive name
myDirective.prototype.slug = "myDirective";
// You can place this in some bootstrap file, or have them at the same file
angular.module("myApp").
directive(myDirective.prototype.slug, myDirective);
