Question

我用TypeScript写了一个AngularJs指令将modelValues复制到剪贴板，指令的“旧”$ scope版本到目前为止工作正常：

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语法版本的指令，但以下代码不起作用。我只显示我编辑的部分，其余指令与上面显示的相同：

 ...
 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”值也不起作用，我不知道如何在课堂上解决它指令的版本。

Answer 1

我建议查看这些链接以获取详细示例（带有工作的掠夺者）

要了解如何使用'bindToController'：

Scope variable for directive is undefined in constructor when using bindToController

我的方法是将控制器移动到自己的类中：

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和TypeScript类的AngularJs指令

1 个答案: