带有 ControllerAs 和 TypeScript 类的 AngularJs 指令 [英] AngularJs directive with ControllerAs and TypeScript Class

问题描述

我已经用 TypeScript 编写了一个 AngularJs 指令来将模型值复制到剪贴板，并且指令的旧"$scope 版本到目前为止工作正常:

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

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"值的访问不起作用，我不知道如何在类中解决它指令的版本.

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)

• 如何使用 TypeScript 定义控制器?
• 如何使用 TypeScript Controller & 绑定数据Angular Js

看看如何使用 'bindToController' 还有这个:

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

• 使用 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 和 TypeScript 类的 AngularJs 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！