AngularJs Directive with Controllers and TypeScript Class

Question

I wrote an AngularJs directive with TypeScript to copy the modelValues ​​file to the clipboard, and the version of older $ scope versions for directives still works:

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 tried to rewrite it to create the controller as a syntactic version of the directive, but the following code does not work. I show only those parts that I edited, since the directive is the same as shown 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" that I can get from the template, and also access to the values ​​of "bindToController" does not work, and I don’t know how to solve it in the class Directive version.

Answer 1

I would suggest checking these links to get detailed examples (with working plungers)

• How to detect my controller using TypeScript?
• How to bind data using TypeScript Controller and Angular Js

And see how to use 'bindToController' also this:

• The scope variable for the undefined directive in the constructor when using bindToController

No matter how I go, this moves the controller to its 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 () { ... } } }