与ControllerAs和打字稿类AngularJs指令 [英] AngularJs directive with ControllerAs and TypeScript Class

问题描述

我已经写了有一个打字稿AngularJs指令modelValues​​复制到剪贴板和旧$余地指令版本工作正常至今：

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
}

所以，我试图重写它来创建指令的controllerAs语法版本，但下面code不工作。我只显示部分我编辑的其余部分外径的指令是相同像上面显示：

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

我不知道如何定义，如copyToClipboard功能，我可以从模板，也是获得bindToController价值观ACCES不工作，我不知道如何解决它的类该指令的版本。

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.

推荐答案

我会建议检查这些链接获得详细的例子的（有工作plunkers）的

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

• 我如何定义使用打字稿我的控制器？


• 如何绑定使用打字稿控制器和放大器的数据;角的js

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

和来看看如何使用'bindToController 也是这个：

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

• 的指令范围变量是在构造函数中使用bindToController
在当前不确定的

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

这篇关于与ControllerAs和打字稿类AngularJs指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！