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.

You have a typo: replcae should be replace

Ruben Helsloot
– Ruben Helsloot

2018-01-31 20:36:02 +00:00
Commented Jan 31, 2018 at 20:36 — Ruben Helsloot
– Ruben Helsloot, Commented Jan 31, 2018 at 20:36

Community · Accepted Answer · 2017-05-23 12:32:00Z

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

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

Thx very cool Solution works fine. You have a littel mistake in your example. public controller = CopyToClipboardCtrl; You need no ":" it needs to bei "="
(thanks for the typo ... I wrote that inside of this textarea... without any checker ;) Great if that helped anyhow! Enjoy Typescript and Angular ;)

Collectives™ on Stack Overflow

AngularJs directive with ControllerAs and TypeScript Class

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related