AngularJs con ControllerAs e tipografico Classe

Question

ho scritto una direttiva AngularJs con dattiloscritto copiare modelValues ​​negli appunti e la "vecchia" versione portata $ per le direttive funziona bene finora:

module App.Directives { 
interface ICopyToClipboardScope extends ng.IScope { 
    sqValues: ng.INgModelController; 
    copyToClipbaord(): void; 
} 

/* 
* Usage: <div sq-copy-to-clipboard ng-model="viewModel.Name"></div> 
*/ 
export class CopyToClipboard implements ng.IDirective { 
    public restrict: string = "A"; 
    public replcae: boolean = true; 
    public require = "ngModel"; 
    public template: string = '<a ng-click="sqCopyPateCtrl.copyToClipboard()" class="btn btn-default" title="In der Zwischenablage ablegen"><i class="fa fa-fw fa-copy"></i></a>'; 

    public scope = { 
     sqValues: "=ngModel" 
    } 

    public controller = ($scope: ICopyToClipboardScope) => { 
     var inputId: string = "sqCopyToClipboardText"; 
     var input = $(`<input id="${inputId}" value="${$scope.sqValues}" style= "width: 1px; height: 1px; margin: 0; border: 0; padding: 0;" />`); 

     $scope.copyToClipbaord =() => { 
      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', [() => { return new CopyToClipboard(); }]); 
     return this._module; 
    } 
    //#endregion 
} 

Così ho' Ho provato a riscriverlo per creare un controller come Sintassi Versione della direttiva ma il codice seguente non funziona. I mostrare solo le parti Ho modificato il resto od direttiva è la stessa come mostrato sopra:

... 
export interface ICopyToClipboardScope { 
    sqValues; 
} 

export class CopyToClipboard implements ng.IDirective { 
    public restrict: string = "A"; 
    public replcae: boolean = true; 
    public require = "ngModel"; 
    public template: string = '<a ng-click="sqCopyPateCtrl.copyToClipboard()" class="btn btn-default" title="In der Zwischenablage ablegen"><i class="fa fa-fw fa-copy"></i></a>'; 

    public scope = { } 

    public controllerAs = "sqCopyPateCtrl"; 
    public bindToController : ICopyToClipboardScope = { 
     sqValues: "=ngModel" 
    } 

    public controller = function() { 
     var inputId: string = "sqCopyToClipboardText"; 
     var input = $(`<input id="${inputId}" value="${this.bindToController.sqValues}" style= "width: 1px; height: 1px; margin: 0; border: 0; padding: 0;" />`); 

     this.copyToClipboard =() => { 
      try { 
       $(input).appendTo(document.body); 
       $(`#${inputId}`, document.body).select(); 
       document.execCommand("copy"); 
      } finally { 
       $(`#${inputId}`, document.body).remove(); 
      } 
     } 
    } 

    copyToClipboard(): void { } 
    ... 
} 

Non so come definire le funzioni come "CopyToClipboard", che posso accesso del modello e anche l'accesso al "bindToController" I valori non funzionano e non ho idea di come risolverlo nella classe Versione della direttiva.

Answer 1

Vorrei suggerire di controllare questi link per ottenere esempi dettagliati (con plunkers di lavoro)

• How can I define my controller using TypeScript?
• How To bind data using TypeScript Controller & Angular Js

E per vedere come utilizzare 'bindToController' anche questo:

• Scope variable for directive is undefined in constructor when using bindToController

Il modo in cui vorrei andare è quello di spostare controller nella propria classe:

namespace MyNamespace { 

    export interface ICopyToClipboardScope { 
     sqValues; 
    } 

    export class CopyToClipboard implements ng.IDirective { 
     public restrict: string = "A"; 
     public replcae: boolean = true; 
     public require = "ngModel"; 
     public template: string = '<a ng-click="sqCopyPateCtrl.copyToClipboard()" ' + 
     ' class="btn btn-default" title="In der Zwischenablage ablegen"' + 
     '><i class="fa fa-fw fa-copy"></i></a>'; 

     public scope = { 
      sqValues; 
     } 

     public controllerAs = "sqCopyPateCtrl"; 
     public controller = MyNamespace.CopyToClipboardController, 
     public bindToController : ICopyToClipboardScope = { 
      sqValues: "=ngModel" 
     } 
    } 

    export class CopyToClipboardController { 

     public sqValues; // the target for bindToContoller 

     static $inject = ['$scope']; 
     constructor(protected $scope: ICopyToClipboardScope) { 
     } 

     public copyToClipboard() { 
      ... 
     } 
    } 
}