AngularJS Typescript directive to class

Question

I am using AngularJS and had been so for quite a while recently i started to mess around with Typescript i was able to convert most of my Angular code to Typescript and found great benefit especially when it get to services, but i can not convert the following directive to typescript class anyone has an idea how to do that, it works perfectly fine as 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;
                });
            }
        };
    });

I can not find a good reference to study how to convert my angular directive to classes. All i found was how to convert AnglularJS service and controllers to classes but not directives. Any ideas? — user3052526
– user3052526, Commented Nov 16, 2015 at 10:11
Factory functions like directive and factory shouldn't be converted into typescript classes, IMO. Directives specifically should be functions returning ng.IDirective. Check my answer to this question — Gustav
– Gustav, Commented Nov 16, 2015 at 10:27
Most of the examples i found, did the same like in your answer @Gustav but what is the reason to deviate from the classes? — user3052526
– user3052526, Commented Nov 16, 2015 at 11:47
Since service-function and controller-function is called with new it fits good to just provide the class. factory-function and directive-function is however not called with new so you have to do it manually if you use class. Normally if you want to use a class with a service you should use service instead of factory, but since the directive-function is a factory function that is not called with new, using it as a function fits better — Gustav
– Gustav, Commented Nov 16, 2015 at 12:30

Shumik · Accepted Answer · 2015-11-16 14:44:38Z

0

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();
    };
};

}

answered Nov 16, 2015 at 14:44

Shumik

71 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

nevradub · Accepted Answer · 2017-06-29 06:54:12Z

directive angularjs required a function. If you want to use directive with typescript class, you need to implement a function Factory for return instance of your class. Look this exemple:

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());
}

Collectives™ on Stack Overflow

AngularJS Typescript directive to class

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related