带有ControllerAs和TypeScript类的AngularJs指令

发布时间：2020-12-17 17:45:56 所属栏目：安全来源：网络整理

导读：我用TypeScript写了一个AngularJs指令将modelValues复制到剪贴板,指令的“旧”$scope版本到目前为止工作正常： module App.Directives {interface ICopyToClipboardScope extends ng.IScope { sqValues: ng.INgModelController; copyToClipbaord(): void;}/*

我用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).remove();
            }
        }
    }

    copyToClipboard(): void { }
     ...
 }

我不知道如何定义像我可以从模板访问的“copyToClipboard”这样的函数,以及对“bindToController”值的访问不起作用,我也不知道如何在类的版本中解决它指示.

解决方法

我建议检查这些链接以获得详细的例子(有工作的掠夺者)

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

并且看看如何使用’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 () {
            ...
        }
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!