AngularJS Typescript 指令到类答案

【问题标题】：AngularJS Typescript directive to classAngularJS Typescript 指令到类
【发布时间】：2017-06-29 14:54:12
【问题描述】：

我正在使用 AngularJS，最近我开始使用 Typescript 有一段时间了将以下指令转换为打字稿类任何人都知道如何做到这一点，它可以像 AngularCode 一样完美地工作

angular.module('myValidation', [])
    .directive('myValidation', function() {
        return {
            restrict: 'A',
            require: "ngModel",
            link: function(scope, elm, attrs, ctrl) {
                switch (attrs.myValidation) {
                    case 'email':
                        var regex = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
                        break;
                }
                ctrl.$parsers.unshift(function(viewValue) {
                    if (regex.test(viewValue)) {
                        ctrl.$setValidity('myValidation', true);
                    }
                    else {
                        ctrl.$setValidity('myValidation', false);
                    }
                    return viewValue;
                });
                ctrl.$formatters.unshift(function(viewValue) {
                    if (regex.test(viewValue)) {
                        ctrl.$setValidity('myValidation', true);
                    }
                    else {
                        ctrl.$setValidity('myValidation', false);
                    }
                    return viewValue;
                });
            }
        };
    });

【问题讨论】：

我找不到很好的参考资料来研究如何将我的角度指令转换为类。我发现的只是如何将 AngularJS 服务和控制器转换为类而不是指令。有什么想法吗？
像 directive 和 factory 这样的工厂函数不应该转换成打字稿类，IMO。指令具体应该是返回ng.IDirective 的函数。检查我对this问题的回答
我发现的大多数例子，在你的回答@Gustav 中都做了同样的事情，但是偏离课程的原因是什么？
由于 service-function 和 controller-function 是用 new 调用的，所以只提供类就很好了。 factory-function 和 directive-function 不会被 new 调用，所以如果你使用 class.通常如果你想使用一个类和一个服务你应该使用service而不是factory，但是因为directive-function是一个工厂函数，不被new调用，使用它作为一个函数更适合

标签： angularjs typescript

【解决方案1】：

https://github.com/aleksey-pastuhov/AngularJS-Typed-Core

@directive(app)
export default class CopyText implements IDirective {
    angularModule = app;
restrict = "E";

scope: any = {
    model: "="
};

templateUrl = "Templates/Directives/copyText.html";

link: (scope: any, elm: any) => void = (scope, elm: any) => {
    var input: JQuery;

    scope.select = ($event) => {
        input = $($event.target).next().first();
    };
    scope.copy = () => {
        input.on("focus", function() {
            this.setSelectionRange(0, this.value.length);
        });

        input.focus();
    };
};

}

【讨论】：

【解决方案2】：

directive angularjs 需要一个函数。如果你想在 typescript 类中使用指令，你需要实现一个函数 Factory 来返回你的类的实例。看这个例子：

Module Directive{
 class myDirectiveCtrl {

        private name: string;
        private items: Array<string>;
        private $q: ng.IQService;
        static $inject = ['$scope','$window','$q'];

        constructor($scope: ImyDirectiveScope, $window) {
            this.name = $scope.name;
            this.items = ['salut', 'hello', 'hi', 'good morning'];
        }

        clickMe = ():void => {
            console.log('dssff');
            this.items.push('yo');
        }

    }
    export interface ImyDirectiveScope {
        name: string
    }

        export class myDirective implements ng.IDirective {
                 restrict = 'E';
                 template = '<div><h1>{{vm.name}}</h1><div ng-repeat="i track by $index in vm.items">{{i}}</div><hr/><button type="button" ng-click="vm.clickMe()">Click Me</button></div>';
                 replace = true;
                 scope = {
                     name: '@'
                 };
                 controller = myDirectiveCtrl;
                 controllerAs = 'vm';

                 link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: myDirectiveCtrl) => {

                 };

                 constructor() { };
                 static factory(): ng.IDirectiveFactory {
                     var directive = () => new myDirective();
                     return directive;
                 }

             }

    app.directive('myDirective',Directive.myDirective.factory());
}

【讨论】：