带有 ControllerAs 和 TypeScript 类的 AngularJs 指令

Posted 2023-03-13

【中文标题】带有 ControllerAs 和 TypeScript 类的 AngularJs 指令

【英文标题】：AngularJs directive with ControllerAs and TypeScript Class

【发布时间】：2016-01-24 04:00:46

【问题描述】：

我已经使用 TypeScript 编写了一个 AngularJs 指令，以将模型值复制到剪贴板，并且指令的“旧”$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”值的访问不起作用，我不知道如何在课堂上解决它指令的版本。

【问题讨论】：

你打错了：repcae 应该被替换

【参考方案1】：

我建议查看这些链接以获取详细示例（使用工作人员）

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 () 
            ...
        
    

【讨论】：

Thx 非常酷的解决方案工作正常。您的示例中有一个小错误。公共控制器 = CopyToClipboardCtrl；你不需要“：”它需要是“=”

（感谢打字错误......我在这个文本区域内写了这个......没有任何检查器;）如果这有帮助的话那就太好了！享受 Typescript 和 Angular ;)