AngularJs directive with ControllerAs and TypeScript Class

Question

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:

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
}

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:

 ...
 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 { }
     ...
 }

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.

Answer 1

I would suggest to check these links to get detailed examples (with working plunkers)

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

And to see how to use 'bindToController' also this:

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

The way I would go is to move controller into its own class:

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 () {
            ...
        }
    }
}