example.ts

import * as $ from "jquery";
import { module as angularModule } from "angular";
import { contenteditable } from "../directives/contenteditable";
import { Component } from "../models/component";
import { idGenerator } from "../services/id_generator"

const moduleName = "directives.pageCanvas";
export let pageCanvas = moduleName;

angularModule(moduleName, [contenteditable]).directive("pageCanvas", function($compile: angular.ICompileService) {
  return {
    restrict: "E",
    scope: {},

    link: function(scope: angular.IScope, element: JQuery, attributes: angular.IAttributes) {
      element = $(element[0]);
      let componentStorage: Map<string, Component> = new Map();

      scope.$parent.$on("directives.stencilItem.startDragging", function(
        event: angular.IAngularEvent,
        draggingComponentModel: new ({ id: string }) => Component
      ) {
        let component: Component = new draggingComponentModel({
          id: idGenerator.generate(componentStorage)
        });