title: AngularJs directive with ControllerAs and TypeScript Class
body: <p>I've written a AngularJs directive with TypeScript to Copy modelValues to the clipboard and the "old" $scope version for directives works fine so far:</p>
  
  <pre><code>module App.Directives {
  interface ICopyToClipboardScope extends ng.IScope {
      sqValues: ng.INgModelController;
      copyToClipbaord(): void;
  }
  
  /*
   * Usage: &lt;div sq-copy-to-clipboard ng-model="viewModel.Name"&gt;&lt;/div&gt;
   */
  export class CopyToClipboard implements ng.IDirective {
      public restrict: string = "A";
      public replcae: boolean = true;
      public require = "ngModel";
      public template: string = '&lt;a ng-click="sqCopyPateCtrl.copyToClipboard()" class="btn btn-default" title="In der Zwischenablage ablegen"&gt;&lt;i class="fa fa-fw fa-copy"&gt;&lt;/i&gt;&lt;/a&gt;';
  
      public scope = {
          sqValues: "=ngModel"
      }
  
      public controller = ($scope: ICopyToClipboardScope) =&gt; {
          var inputId: string = "sqCopyToClipboardText";
          var input = $(`&lt;input id="${inputId}" value="${$scope.sqValues}" style= "width: 1px; height: 1px; margin: 0; border: 0; padding: 0;" /&gt;`);
  
          $scope.copyToClipbaord = () =&gt; {
              try {
                  $(input).appendTo(document.body);
                  $(`#${inputId}`, document.body).select();
                  document.execCommand("copy");
              } finally {
                  $(`#${inputId}`, document.body).remove();
              }
          }
      }
  
      //#region Angular Module Definition
      private static _module: ng.IModule;
      public static get module(): ng.IModule {
          if (this._module) {
              return this._module;
          }
          this._module = angular.module('copyToClipboard.directives', []);
          this._module.directive('sqCopyToClipboard', [() =&gt; { return new CopyToClipboard(); }]);
          return this._module;
      }
      //#endregion
  }
  </code></pre>
  
  <p>So I've tried to rewrite it to create a controllerAs Syntax Version of the directive but the following code is not working. I only show the Parts I've edited the rest od the directive is the same like showed above:</p>
  
  <pre><code> ...
   export interface ICopyToClipboardScope {
      sqValues;
   }
  
   export class CopyToClipboard implements ng.IDirective {
      public restrict: string = "A";
      public replcae: boolean = true;
      public require = "ngModel";
      public template: string = '&lt;a ng-click="sqCopyPateCtrl.copyToClipboard()" class="btn btn-default" title="In der Zwischenablage ablegen"&gt;&lt;i class="fa fa-fw fa-copy"&gt;&lt;/i&gt;&lt;/a&gt;';
  
      public scope = { }
  
      public controllerAs = "sqCopyPateCtrl";
      public bindToController : ICopyToClipboardScope = {
          sqValues: "=ngModel"
      }
  
      public controller = function() {
          var inputId: string = "sqCopyToClipboardText";
          var input = $(`&lt;input id="${inputId}" value="${this.bindToController.sqValues}" style= "width: 1px; height: 1px; margin: 0; border: 0; padding: 0;" /&gt;`);
  
          this.copyToClipboard = () =&gt; {
              try {
                  $(input).appendTo(document.body);
                  $(`#${inputId}`, document.body).select();
                  document.execCommand("copy");
              } finally {
                  $(`#${inputId}`, document.body).remove();
              }
          }
      }
  
      copyToClipboard(): void { }
       ...
   }
  </code></pre>
  
  <p>I don't know how to define functions like "copyToClipboard" which I can acces from the template and also the access to the "bindToController" Values don't work and I've no idea how to solve it in the class Version of the directive.</p>